Flutter_html: Always left aligned

Created on 25 Mar 2019  路  7Comments  路  Source: Sub6Resources/flutter_html

Hi I have this simple HTML Widget:

Html(
    data: "<b>Test</b>,
);

This gets put into this:

Column(
    crossAxisAlignment: CrossAxisAlignment.end,
    children: <Widget>[
        Container(
            margin: const EdgeInsets.all(3.0),
            padding: const EdgeInsets.all(8.0),
            decoration: BoxDecoration(
                boxShadow: [
                    BoxShadow(
                        blurRadius: .5,
                        spreadRadius: 1.0,
                        color: Colors.black.withOpacity(.12))
                ],
                color: Color(0xfffaffe8),
                borderRadius:  BorderRadius.only(
                    topLeft: Radius.circular(5.0),
                    bottomLeft: Radius.circular(5.0),
                    bottomRight: Radius.circular(10.0),
                ),
            ),
            child: Stack(
                children: <Widget>[
                    Html(
                        data: "<b>Test</b>,
                    ),
                    Positioned(
                        bottom: 0.0,
                        right: 0.0,
                        child: Text(
                            time,
                            style: TextStyle(
                                color: Colors.black38,
                                fontSize: 10.0,
                            ),
                        ),
                    )
                ],
            ),
        )
    ],
);

The Problem is no matter what I do the Text of the HTML Widget is on the left side expanding the whole bubble :/

Is there any possible fix for this?

bug medium-priority richtext-parser

Most helpful comment

Hi, is this still being worked on? :)

All 7 comments

Hey a screenshot of what you expect to see would be nice. Is there a specific reason to use a Stack ? Since you are probably only showing a short html text without images or stuff like that you might consider parsing the text with https://pub.dartlang.org/packages/html and displaying it in a Text Widget. You can then use parse('<p>Test</p>').body.text

Hi the full actual implementation Looks like this (blured for brand and privacy reasons):

grafik

And yes Images would be shown differently. The main reason for using this is to display formatting that the proto sends (it is Markdown send as HTML).

If your suggestion does support formatting I indeed think thats better.

The stack is simply because I am new to flutter and that was on my first try the easiest way to get the date at the correct position. That actually might be getting replaced.

Thanks for the screenshot, this makes it way clearer. The proposed doesn't support styling. Since the library uses a Column or Wrap I think @Sub6Resources must implement an option to set mainAxisSize to min.

@The-Redhat well by styling I mean things like bold, italic and the Supported Tags that are more special than normal text :) (sorry for using the wrong words.)
But an ability to Set mainAxisSize to min would be awesome

@MTRNord I'll work on adding the ability to set mainAxisSize to min as I have time. Thanks for submitting an issue!

Hi, is this still being worked on? :)

image

I also have this issue . alway align left . How I make it align center.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

freddoOswaldo picture freddoOswaldo  路  4Comments

hunglv21 picture hunglv21  路  5Comments

raLaaaa picture raLaaaa  路  3Comments

zs-dima picture zs-dima  路  4Comments

Seedorf161 picture Seedorf161  路  5Comments