Sub6Resources / flutter_html

A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)
https://pub.dev/packages/flutter_html
MIT License
1.8k stars 875 forks source link

[BUG] Support Scrollbar In Table For Version 3 #1114

Closed f1dz closed 2 years ago

f1dz commented 2 years ago

In version 2, I can add scrollbar as follows:

...
customRender: {
  "table": (context, child) {
    var col = context.tree.children[0].children[0].children;
    var rows = context.tree.children[0].children;
    if (context.tree.elementId.contains("custom_width")) {
      for (var item in rows) {
        for (var td in item.children) {
          td.style.width = 250;
        }
      }
    }
    final _scrollController = ScrollController();
    return col.length > 2
        ? Scrollbar(
            scrollbarOrientation: ScrollbarOrientation.top,
            controller: _scrollController,
            isAlwaysShown: true,
            child: SingleChildScrollView(
              controller: _scrollController,
              scrollDirection: Axis.horizontal,
              child: (context.tree as TableLayoutElement).toWidget(context),
            ),
          )
        : (context.tree as TableLayoutElement).toWidget(context);
  }
},
...

And in version 3 I believed should be like this:

...
customRenders: {
   tableMatcher(): customTableRender(),
}
...
CustomRender customTableRender() => CustomRender.widget(widget: (context, child) {
  var col = context.tree.children[0].children[0].children;
  var rows = context.tree.children[0].children;
  if (context.tree.elementId.contains("custom_width")) {
    for (var item in rows) {
      for (var td in item.children) {
        td.style.width = 250;
      }
    }
  }
  final scrollController = ScrollController();
  return col.length > 2
      ? Scrollbar(
          scrollbarOrientation: ScrollbarOrientation.top,
          controller: scrollController,
          thumbVisibility: true,
          child: SingleChildScrollView(
            controller: scrollController,
            scrollDirection: Axis.horizontal,
            child: (context.tree as TableLayoutElement).toWidget(context),
          ),
        )
      : (context.tree as TableLayoutElement).toWidget(context);
});

The problem is that in version 3 there is no TableLayoutElement, is there any way to resolve this issue? Or maybe how to convert a tree into a widget?

Thank you Ofid

erickok commented 2 years ago

I'm on holiday and not near a computer right now but check the library example app code, it has a scrollable table.

erickok commented 2 years ago
            tagMatcher("table"): CustomRender.widget(widget: (context, buildChildren) => SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: tableRender.call().widget!.call(context, buildChildren),
            )),
f1dz commented 2 years ago

Thanks a lot @erickok You bring me the idea. Its works now! Cheers 🍻