search

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.79k stars 860 forks source link

[BUG] Error in table rendering in flutter_html 3.0.0-alpha.6 #1242

Open mlp1201 opened 1 year ago

mlp1201 commented 1 year ago

Describe the bug:

We were using flutter_html: ^2.1.1 and rendering table was working fine. This screenshot exemplifies it: image

But after upgrading to flutter_html 3.0.0-alpha.6, the table is not rendering. This screenshot exemplifies it: image

Error log: image

Html widget configuration:

static const htmlData = """
  <table style=\"border-collapse: collapse; width: 100%; text-align: left;\">
    <tbody>\n
        <tr>\n\t<td style=\"width: 7.52896%;\"><span lang=\"ZH-CN\" style=\"font-size: 14px; line-height: 107%;
                    font-family: 宋体;\">序号</span><br></td>\n\t<td style=\"width: 22.5806%;\"><span lang=\"ZH-CN\"
                    style=\"font-size: 14px; line-height: 107%; font-family: 宋体;\">函数</span><br></td>\n\t<td
                style=\"width: 43.5484%;\"><span lang=\"ZH-CN\" style=\"font-size: 14px; line-height: 107%; font-family:
                    宋体;\">语法</span><br></td>\n\t<td style=\"width: 26.2548%;\"><span lang=\"ZH-CN\" style=\"font-size:
                    14px; line-height: 107%; font-family: 宋体;\">备注</span><br></td>
        </tr>\n<tr>\n\t<td style=\"text-align: left;\"><span style=\"font-family: Georgia, serif; font-size:
                    14px;\">1</span></td>\n\t<td style=\"text-align: left;\"><span style=\"font-size: 14px; line-height:
                    107%; font-family: Georgia, serif;\">Endofyear(month/quarter)</span><br></td>\n\t<td
                style=\"text-align: left;\"><span style=\"font-size: 14px; line-height: 107%; font-family: Georgia,
                    serif;\">ENDOFYEAR(&lt;dates&gt;[,&lt;year_end_date&gt;])<span>&nbsp; </span></span><br></td>\n\t<td
                style=\"text-align: left;\"><span lang=\"ZH-CN\" style=\"font-size: 14px; line-height: 107%;
                    font-family: 宋体;\">最后一个日期（月</span><span style=\"font-size: 14px; line-height: 107%; font-family:
                    Georgia, serif;\">/</span><span lang=\"ZH-CN\" style=\"line-height: 107%; font-family: 宋体;
                    font-size: 14px;\"><span style=\"font-size: 14px;\">季度）</span><br>
                    <p class=\"MsoNormal\" style=\"font-size: 15px; margin: 0px 0px 11px; line-height: 107%;
                        font-family: Georgia, serif;\"><span lang=\"ZH-CN\" style=\"font-size: 14px; line-height: 107%;
                            font-family: 宋体;\">应用：</span></p>\n\n<strong style=\"\"><em style=\"\"><span
                                lang=\"EN-US\" style=\"line-height: 107%; font-family: Georgia, serif; color: rgb(226,
                                117, 136); background: white; font-size: 15px;\"><a
                                    href=\"https://cnhkjanus.asia.pwcinternal.com/?paras=58ca536a98d449e09dfd3740zocza5e14ca28ef805f0b6662dae0e28593ezocz638f41a45ce6ca22f49a280c\">Power
                                    BI DAX: Time Intelligence Functions — Semi-additive
                                    Measures</a></span></em></strong>
                </span><br></td>
        </tr>\n<tr>\n\t<td style=\"text-align: left;\"><span style=\"font-family: Georgia, serif; font-size:
                    14px;\">2</span></td>\n\t<td style=\"text-align: left;\"><span style=\"font-size: 14px; line-height:
                    107%; font-family: Georgia, serif;\">Startofyear(month/quarter)</span><br></td>\n\t<td
                style=\"text-align: left;\"><span style=\"font-size: 14px; line-height: 107%; font-family: Georgia,
                    serif;\">STARTOFYEAR(&lt;dates&gt;)<span>&nbsp; </span></span><br></td>\n\t<td style=\"text-align:
                left;\"><span lang=\"ZH-CN\" style=\"font-size: 14px; line-height: 107%; font-family:
                    宋体;\">本年（月</span><span style=\"font-size: 14px; line-height: 107%; font-family: Georgia,
                    serif;\">/</span><span lang=\"ZH-CN\" style=\"font-size: 14px; line-height: 107%; font-family:
                    宋体;\">季度）</span><br></td>
        </tr>\n<tr>\n\t<td style=\"text-align: left;\"><span style=\"font-size: 14px; font-family: Georgia,
                    serif;\">3</span></td>\n\t<td style=\"text-align: left;\"><span style=\"font-size: 14px;
                    line-height: 107%; font-family: Georgia, serif;\">Firstdate</span><br></td>\n\t<td
                style=\"text-align: left;\"><span style=\"font-size: 14px; line-height: 107%; font-family: Georgia,
                    serif;\">FIRSTDATE(&lt;dates&gt;)<span>&nbsp; </span></span><br></td>\n\t<td style=\"text-align:
                left;\"><span lang=\"ZH-CN\" style=\"font-size: 14px; line-height: 107%; font-family:
                    宋体;\">日期的</span><span style=\"line-height: 107%; font-family: Georgia, serif; font-size:
                    14px;\">MIN( )</span><span lang=\"ZH-CN\" style=\"font-size: 14px; line-height: 107%; font-family:
                    宋体;\">，日期</span><br></td>
        </tr>\n<tr>\n\t<td style=\"text-align: left;\"><span style=\"font-size: 14px; font-family: Georgia,
                    serif;\">4</span></td>\n\t<td style=\"text-align: left;\"><span style=\"font-size: 14px;
                    line-height: 107%; font-family: Georgia, serif;\">Lastdate</span><br></td>\n\t<td
                style=\"text-align: left;\"><span style=\"font-size: 14px; line-height: 107%; font-family: Georgia,
                    serif;\">LASTDATE(&lt;dates&gt;)</span><br></td>\n\t<td style=\"text-align: left;\"><span
                    lang=\"ZH-CN\" style=\"font-size: 14px; line-height: 107%; font-family: 宋体;\">日期的</span><span
                    style=\"line-height: 107%; font-family: Georgia, serif; font-size: 14px;\">MAX( )</span><span
                    lang=\"ZH-CN\" style=\"line-height: 107%; font-family: 宋体; font-size: 14px;\"><span
                        style=\"font-size: 14px;\">，日期</span><br>
                    <p class=\"MsoNormal\" style=\"font-size: 15px; margin: 0px 0px 11px; line-height: 107%;
                        font-family: Georgia, serif;\"><span lang=\"ZH-CN\" style=\"font-size: 14px; line-height: 107%;
                            font-family: 宋体;\">应用：</span></p>\n\n<strong style=\"\"><em style=\"\"><span
                                lang=\"EN-US\" style=\"line-height: 107%; font-family: Georgia, serif; color: rgb(226,
                                117, 136); background: white; font-size: 15px;\"><a
                                    href=\"https://cnhkjanus.asia.pwcinternal.com/?paras=58ca536a98d449e09dfd3740zocza5e14ca28ef805f0b6662dae0e28593ezocz638f41a45ce6ca22f49a280c\">Power
                                    BI DAX: Time Intelligence Functions — Semi-additive
                                    Measures</a></span></em></strong>
                </span><br></td>
        </tr>\n<tr>\n\t<td style=\"text-align: left;\"><span style=\"font-family: Georgia, serif; font-size:
                    14px;\">5</span></td>\n\t<td style=\"text-align: left;\"><span style=\"font-size: 14px; line-height:
                    107%; font-family: Georgia, serif;\">Firstnonblank</span><br></td>\n\t<td style=\"text-align:
                left;\"><span style=\"font-size: 14px; line-height: 107%; font-family: Georgia,
                    serif;\">FIRSTNONBLANK(&lt;column&gt;,&lt;expression&gt;)<span>&nbsp; </span></span><br></td>\n\t<td
                style=\"text-align: left;\"><span lang=\"ZH-CN\" style=\"font-size: 14px; line-height: 107%;
                    font-family: 宋体;\">计算</span><br></td>

    </tbody>
</table>
""";

Widget htmlWidget() {
    return Html(
      data: htmlData,
      style: htmlStyle,
      customRenders: {
        dataUriMatcher(): customBase64ImageRender(),
        tableMatcher(): tableRender(),
        audioMatcher(): audioRender(),
        videoMatcher(): videoRender(),
        iframeMatcher(): iframeRender(),
        svgTagMatcher(): svgTagRender(),
        svgDataUriMatcher(): svgDataImageRender(),
        svgAssetUriMatcher(): svgAssetImageRender(),
        svgNetworkSourceMatcher(): svgNetworkImageRender(),
        networkSourceMatcher(): networkImageRender(
            altWidget: (_) => const Text(""),
            loadingWidget: () => Container(
                  color: Colours.colorDEDEDE,
                  width: SizeType.screenWidth - SizeType.w40,
                  height: 120,
                )),
        mathMatcher():
            mathRender(onMathError: (error, exception, exceptionWithType) {
          debugPrint(exception);
          return Text(exception);
        }),
        texMatcher(): CustomRender.widget(
            widget: (context, buildChildren) => Math.tex(
                  context.tree.element?.innerHtml ?? '',
                  mathStyle: MathStyle.display,
                  textStyle: context.style.generateTextStyle(),
                  onErrorFallback: (FlutterMathException e) {
                    //optionally try and correct the Tex string here
                    return Text(e.message);
                  },
                )),
        tagMatcher("table"): CustomRender.widget(widget: (context, buildChildren) => SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: tableRender.call().widget!.call(context, buildChildren),
        )),
      },
      tagsList: Html.tags..add('tex'),
      onLinkTap: (url, _, __, ___) {
        if (url != null) {
          JanusApplication.router
              .navigateTo(context, JanusRouter.postCommonPage,
                  routeSettings: RouteSettings(
                    arguments: {
                      'url': url,
                    },
                  ),
                  transition: TransitionType.native);
        }
      },
      onImageTap: (src, _, __, ___) {
        JanusApplication.router.navigateTo(context, JanusRouter.postCommonPage,
            routeSettings: RouteSettings(
              arguments: {
                'url': src,
              },
            ),
            transition: TransitionType.native);
      },
      onImageError: (exception, stackTrace) {
        if (kDebugMode) {
          print(exception);
        }
      },
      onCssParseError: (css, messages) {
        debugPrint("css that errored: $css");
        debugPrint("error messages:");
        for (var element in messages) {
          debugPrint(element.toString());
        }
        return '';
      },
    );
  }

Flutter doctor image

fabianotavallini commented 1 year ago

@mlp1201 you can take a look to my workaround solution here