Proposal for #584 to add element (tree) to custom render, allowing to wrap the default implementation

Author: erickok

.gitignore

@@ -149,3 +149,5 @@ modules.xml
 **/.flutter-plugins-dependencies
 
 **/flutter_export_environment.sh
+
+/example/ios/Flutter/Flutter.podspec

example/lib/main.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
 import 'package:flutter_html/image_render.dart';
+import 'package:flutter_html/src/layout_element.dart';
+import 'package:flutter_html/style.dart';
 
 void main() => runApp(new MyApp());
 
@@ -149,10 +151,32 @@ class _MyHomePageState extends State<MyHomePage> {
       body: SingleChildScrollView(
         child: Html(
           data: htmlData,
-          //Optional parameters:
+          style: {
+            "table": Style(
+              backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee),
+            ),
+            "tr": Style(
+              border: Border(bottom: BorderSide(color: Colors.grey)),
+            ),
+            "th": Style(
+              padding: EdgeInsets.all(6),
+              backgroundColor: Colors.grey,
+            ),
+            "td": Style(
+              padding: EdgeInsets.all(6),
+              alignment: Alignment.topLeft,
+            ),
+          },
+          customRender: {
+            "table": (context, child) {
+              return SingleChildScrollView(
+                scrollDirection: Axis.horizontal,
+                child: (context.tree as TableLayoutElement).toWidget(context),
+              );
+            }
+          },
           customImageRenders: {
-            networkSourceMatcher(domains: ["flutter.dev"]):
-                (context, attributes, element) {
+            networkSourceMatcher(domains: ["flutter.dev"]): (context, attributes, element) {
               return FlutterLogo(size: 36);
             },
             networkSourceMatcher(domains: ["mydomain.com"]): networkImageRender(

lib/html_parser.dart

@@ -25,8 +25,6 @@ typedef OnTap = void Function(
 typedef CustomRender = dynamic Function(
   RenderContext context,
   Widget parsedChild,
-  Map<String, String> attributes,
-  dom.Element? element,
 );
 
 class HtmlParser extends StatelessWidget {
@@ -72,6 +70,7 @@ class HtmlParser extends StatelessWidget {
       RenderContext(
         buildContext: context,
         parser: this,
+        tree: cleanedTree,
         style: Style.fromTextStyle(Theme.of(context).textTheme.bodyText2!),
       ),
       cleanedTree,
@@ -88,6 +87,7 @@ class HtmlParser extends StatelessWidget {
       renderContext: RenderContext(
         buildContext: context,
         parser: this,
+        tree: cleanedTree,
         style: Style.fromTextStyle(Theme.of(context).textTheme.bodyText2!),
       ),
     );
@@ -236,6 +236,7 @@ class HtmlParser extends StatelessWidget {
     RenderContext newContext = RenderContext(
       buildContext: context.buildContext,
       parser: this,
+      tree: tree,
       style: context.style.copyOnlyInherited(tree.style),
     );
 
@@ -248,8 +249,6 @@ class HtmlParser extends StatelessWidget {
           shrinkWrap: context.parser.shrinkWrap,
           children: tree.children.map((tree) => parseTree(newContext, tree)).toList(),
         ),
-        tree.attributes,
-        tree.element,
       );
       if (render != null) {
         assert(render is InlineSpan || render is Widget);
@@ -713,11 +712,13 @@ class HtmlParser extends StatelessWidget {
 class RenderContext {
   final BuildContext buildContext;
   final HtmlParser parser;
+  final StyledElement tree;
   final Style style;
 
   RenderContext({
     required this.buildContext,
     required this.parser,
+    required this.tree,
     required this.style,
   });
 }

lib/src/layout_element.dart

@@ -36,11 +36,11 @@ class TableLayoutElement extends LayoutElement {
       ),
       width: style.width,
       height: style.height,
-      child: _layoutCells(context),
+      child: LayoutBuilder(builder: (_, constraints) => _layoutCells(context, constraints)),
     );
   }
 
-  Widget _layoutCells(RenderContext context) {
+  Widget _layoutCells(RenderContext context, BoxConstraints constraints) {
     final rows = <TableRowLayoutElement>[];
     List<TrackSize> columnSizes = <TrackSize>[];
     for (var child in children) {
@@ -53,6 +53,10 @@ class TableLayoutElement extends LayoutElement {
               final colWidth = c.attributes["width"];
               return List.generate(span, (index) {
                 if (colWidth != null && colWidth.endsWith("%")) {
+                  if (!constraints.hasBoundedWidth) {
+                    // In a horizontally unbounded container; always wrap content instead of applying flex
+                    return IntrinsicContentTrackSize();
+                  }
                   final percentageSize = double.tryParse(
                       colWidth.substring(0, colWidth.length - 1));
                   return percentageSize != null && !percentageSize.isNaN