dart-lang / html

Dart port of html5lib. For parsing HTML/HTML5 with Dart. Works in the client and on the server.

Home Page:https://pub.dev/packages/html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

shrinkWrap not working

asmith20002 opened this issue · comments

flutter_html: ^1.3.0

Html automatically fills up all the width of the parent. I really need it to just wrap the content. No matter whether the shrinkWrap is true or false, or even if I even specify a width, the parent container is always stretched to max.

Without specifying width:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(color: Colors.cyan, child: Text('No HTML')),
              SizedBox(
                height: 20,
              ),
              Container(
                color: Colors.cyan,
                child: Html(
                  data: 'bold <strong>text</strong>',
                  shrinkWrap: true,
                  style: {
                    'html': Style(backgroundColor: Colors.red),
                    'body': Style(backgroundColor: Colors.red),
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

photo_2021-05-03_18-00-23

With specifying width:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(color: Colors.cyan, child: Text('No HTML')),
              SizedBox(
                height: 20,
              ),
              Container(
                color: Colors.cyan,
                child: Html(
                  data: 'bold <strong>text</strong>',
                  shrinkWrap: true,
                  style: {
                    'html': Style(width: 80, backgroundColor: Colors.red),
                    'body': Style(width: 80, backgroundColor: Colors.red),
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

photo_2021-05-03_17-39-53

as you can see the parent container is stretched either way.

[√] Flutter (Channel beta, 2.2.0-10.2.pre, on Microsoft Windows [Version
    10.0.19041.928], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[√] Chrome - develop for the web
[√] Android Studio (version 4.1.0)
[√] Android Studio
[√] Connected device (3 available)

• No issues found!

I found the problem.

html_parser.dart, calculateWidth() function:

  double calculateWidth(Display display, RenderContext context) {
    if ((display == Display.BLOCK || display == Display.LIST_ITEM) && !renderContext.parser.shrinkWrap) {
      return double.infinity;
    }
    if (renderContext.parser.shrinkWrap) {
      return MediaQuery.of(context.buildContext).size.width;
    }
    return null;
  }

The exclamation mark is missing for the shrinkWrap statement. Must be this:

    if (!renderContext.parser.shrinkWrap) {
      return MediaQuery.of(context.buildContext).size.width;
    }