[BUG] Error in table rendering in flutter_html 3.0.0-alpha.6 #1242
Description
Describe the bug:
We were using flutter_html: ^2.1.1 and rendering table was working fine. This screenshot exemplifies it:
But after upgrading to flutter_html 3.0.0-alpha.6, the table is not rendering. This screenshot exemplifies it:
Error log:
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(<dates>[,<year_end_date>])<span> </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(<dates>)<span> </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(<dates>)<span> </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(<dates>)</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(<column>,<expression>)<span> </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
