Merge pull request #530 from tneotia/bugfix/shrink-wrap

Fix shrink wrap not applying correctly

Author: ryan-berger

README.md

@@ -86,6 +86,8 @@ A Flutter widget for rendering HTML and CSS as Flutter widgets.
   - [SVG](#svg)
 
   - [Table](#table)
+  
+- [Notes](#notes)
 
 - [Migration Guide](#migration-guides)
 
@@ -102,12 +104,13 @@ Add the following to your `pubspec.yaml` file:
 |            |           |       |             |         |         |       |      |        |        |        |
 |------------|-----------|-------|-------------|---------|---------|-------|------|--------|--------|--------|
 |`a`         | `abbr`    | `acronym`| `address`   | `article`| `aside` | `audio`| `b`  | `bdi`  | `bdo`  | `big`  |
-|`blockquote`| `body`    | `br`  | `caption`   | `cite`  | `code`  | `data`| `dd` | `del`  | `dfn`  | `div`  |
-|`dl`        | `dt`      | `em`  | `figcaption`| `figure`| `footer`| `h1`  | `h2` | `h3`   | `h4`   | `h5`   |
-|`h6`        | `header`  | `hr`  | `i`         | `iframe`| `img`   | `ins` | `kbd`| `li`   | `main` | `mark` |
-|`nav`       | `noscript`|`ol`   | `p`         | `pre`   | `q`     | `rp`  | `rt` | `ruby` | `s`    |`samp`  |
-|`section`   | `small`   | `span`| `strike`    | `strong`| `sub`   | `sup` | `svg`| `table`| `tbody`| `td`   |
-| `template` | `tfoot`   | `th`  | `thead`     |`time`   | `tr`    | `tt`  | `u`  | `ul`   | `var`  | `video`|
+|`blockquote`| `body`    | `br`  | `caption`   | `cite`  | `code`  | `data`| `dd` | `del`  | `details`  | `dfn`  |
+| `div` | `dl`        | `dt`      | `em`  | `figcaption`| `figure`| `footer`| `h1`  | `h2` | `h3`   | `h4`   |
+| `h5` |`h6`        | `header`  | `hr`  | `i`         | `iframe`| `img`   | `ins` | `kbd`| `li`   | `main` | 
+| `mark` | `nav`       | `noscript`|`ol`   | `p`         | `pre`   | `q`     | `rp`  | `rt` | `ruby` | `s`  |
+| `samp` | `section`   | `small`   | `span`| `strike`    | `strong`| `sub`   | `sup` | `summary` | `svg`| `table`| 
+| `tbody` | `td` | `template` | `tfoot`   | `th`  | `thead`     |`time`   | `tr`    | `tt`  | `u`  | `ul` |
+| `var` | `video` |    |   |      |   |     |   |   |    |   | 
 
 
 
@@ -646,6 +649,24 @@ This package renders table elements using the [`flutter_layout_grid`](https://pu
 
 When rendering table elements, the package tries to calculate the best fit for each element and size its cell accordingly. `Rowspan`s and `colspan`s are considered in this process, so cells that span across multiple rows and columns are rendered as expected. Heights are determined intrinsically to maintain an optimal aspect ratio for the cell.
 
+## Notes
+
+1. If you'd like to use this widget inside of a `Row()`, make sure to set `shrinkWrap: true` and place your widget inside expanded:
+
+```dart
+Widget row = Row(
+   children: [
+	Expanded(
+	    child: Html(
+          shrinkWrap: true,
+          //other params
+        )
+	),
+	//whatever other widgets
+   ]
+);
+```
+
 ## Migration Guides
 - For Version 1.0 - [Guide](https://github.com/Sub6Resources/flutter_html/wiki/1.0.0-Migration-Guide)
 

lib/html_parser.dart

@@ -68,7 +68,6 @@ class HtmlParser extends StatelessWidget {
       RenderContext(
         buildContext: context,
         parser: this,
-        style: Style.fromTextStyle(Theme.of(context).textTheme.bodyText2),
       ),
       cleanedTree,
     );
@@ -81,6 +80,11 @@ class HtmlParser extends StatelessWidget {
       textSpan: parsedTree,
       style: cleanedTree.style,
       textScaleFactor: MediaQuery.of(context).textScaleFactor,
+      renderContext: RenderContext(
+        buildContext: context,
+        parser: this,
+        style: Style.fromTextStyle(Theme.of(context).textTheme.bodyText2),
+      ),
     );
   }
 
@@ -322,6 +326,7 @@ class HtmlParser extends StatelessWidget {
                     style: newContext.style.generateTextStyle(),
                   ),
                   style: newContext.style,
+                  renderContext: context,
                 ),
               )
             ],
@@ -412,6 +417,7 @@ class HtmlParser extends StatelessWidget {
                   [],
             ),
             style: newContext.style,
+            renderContext: context,
           ),
         ),
       );
@@ -760,6 +766,7 @@ class ContainerSpan extends StatelessWidget {
               children: children,
             ),
             style: newContext.style,
+            renderContext: newContext,
           ),
     );
   }
@@ -769,20 +776,19 @@ class StyledText extends StatelessWidget {
   final InlineSpan textSpan;
   final Style style;
   final double textScaleFactor;
+  final RenderContext renderContext;
 
   const StyledText({
     this.textSpan,
     this.style,
     this.textScaleFactor = 1.0,
+    this.renderContext,
   });
 
   @override
   Widget build(BuildContext context) {
     return SizedBox(
-      width:
-          style.display == Display.BLOCK || style.display == Display.LIST_ITEM
-              ? double.infinity
-              : null,
+      width: calculateWidth(style.display, renderContext),
       child: Text.rich(
         textSpan,
         style: style.generateTextStyle(),
@@ -792,4 +798,14 @@ class StyledText extends StatelessWidget {
       ),
     );
   }
+
+  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;
+  }
 }

lib/src/layout_element.dart

@@ -119,6 +119,7 @@ class TableLayoutElement extends LayoutElement {
                   child: StyledText(
                     textSpan: context.parser.parseTree(context, child),
                     style: child.style,
+                    renderContext: context,
                   ),
                 ),
               ),
@@ -284,6 +285,7 @@ class DetailsContentElement extends LayoutElement {
             children: [firstChild] ?? [],
           ),
           style: style,
+          renderContext: context,
         ) : Text("Details"),
         children: [
           StyledText(
@@ -292,6 +294,7 @@ class DetailsContentElement extends LayoutElement {
               children: getChildren(childrenList, context, elementList?.isNotEmpty == true && elementList?.first?.localName == "summary" ? firstChild : null)
             ),
             style: style,
+            renderContext: context,
           ),
         ]
     );