I am currently using a plugin (flutter_html 2.2.1) to display HTML data that contains both nested and non-nested tables within my Flutter application. The code I have provided below is used to display the tables, but it only allows me to show the non-nested tables within a scrollable view. I am seeking a solution that would enable me to display both the nested and non-nested tables in a single scrollable view. Can you please suggest a solution to this issue?
Html data coming from API:-
"
<body>
\r\n\r\n
<h2>SQL NUMERIC/MATH FUNCTIONS</h2>
\r\n
<p>A mathematical function performs a mathematical operation on numeric values and return a numeric value as a result of the operation.</p>
\r\n
<p>Arithmetic functions, such as ABS, CEILING, DEGREES, FLOOR, POWER, RADIANS, and SIGN, return a value having the same data type as the input value. Trigonometric and other functions, including EXP, LOG, LOG10, SQUARE, and SQRT, cast their input values to float and return a float value.</p>
\r\n
<p>All mathematical functions, except for RAND, are deterministic functions. This means they return the same results each time they are called with a specific set of input values. RAND is deterministic only when a seed parameter is specified.</p>
\r\n\r\n
<h3>NUMERIC/MATH FUNCTIONS</h3>
\r\n
<p>The following table details various numeric/math functions:</p>
\r\n\r\n
<table id=\"customers\">
\r\n \r\n
<tr>
\r\n
<th align=\"center\"><b>Function</b></th>
\r\n
<th align=\"center\"><b>Description & Example</b></th>
\r\n
</tr>
\r\n \r\n
<tr>
\r\n
<td valign=\"top\">ABS</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the absolute value of a number<br/>\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT ABS(5);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> ABS(5) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>5</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">ACOS</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the arc cosine of a number <br/>\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT ACOS(1);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> ACOS(1) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>0</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">ASIN</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the arc sine of a number<br/>\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT ASIN(1);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b>ASIN(1) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>1.5707963267949 </td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">ATAN</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the arc tangent of a number <br/>\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT ATAN(1);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> ATAN(1) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>0.785398163397448</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">ATN2</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the arc tangent of two numbers<br/>\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT ATN2(5,2);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> ATN2(5,2) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>1.19028994968253</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">CEILING</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the smallest integer value that is greater than and equal (>=) to a number\r\n<br/>\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT CEILING(25.75);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> CEILING(25.75) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>26</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">COS</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the cosine of a number <br/><br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT COS(1);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> COS(1) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>0.54030230586814</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">COT</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the cotangent of a number<br/>\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT COT(1);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> COT(1) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>0.642092615934331</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">DEGREES</td>
\r\n\r\n
<td valign=\"top\">
<b>Converts a value in radians to degrees <br/><br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT DEGREES(5);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> DEGREES(5) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>286</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">EXP</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns e raised to the power of a specified number <br/>\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT EXP(2);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> EXP(2) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>7.38905609893065</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">FLOOR\r\n</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the largest integer value that is greater than and equal (<=) to a number <br/>\r\n<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT FLOOR(25.75);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> FLOOR(25.75) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>25</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">LOG\r\n</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the natural logarithm of a number, or the logarithm of a number to a specified base <br/>\r\n\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT LOG(5);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> LOG(5) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>1.6094379124341</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">LOG10\r\n</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the natural logarithm of a number to base 10 <br/>\r\n\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT LOG10(5);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> LOG10(5) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>0.698970004336019</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">PI\r\n</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the value of PI <br/>\r\n\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT PI();\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> PI( ) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>3.14159265358979</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">POWER\r\n</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the value of a number raised to the power of another number <br/>\r\n<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT POWER(3, 2);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> POWER(3, 2) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>9</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">RADIANS\r\n</td>
\r\n\r\n
<td valign=\"top\">
<b>Converts a degree value into radians <br/>\r\n\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT RADIANS(90);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> RADIANS(90) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>1</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">RAND\r\n</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns a random number <br/>\r\n\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT RAND();\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> RAND( )</b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>0.149683153611311</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">ROUND\r\n</td>
\r\n\r\n
<td valign=\"top\">
<b>Rounds a number to a specified number of decimal places <br/>\r\n\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT ROUND(235.415, 2);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> ROUND(235.415, 2) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>235.420</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">SIGN\r\n</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the sign of a number <br/>\r\n\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT SIGN(250.5);</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> SIGN(250.5)</b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>1.0</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">SIN\r\n</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the sine of a number <br/>\r\n\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT SIN(1);</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> SIN(1)</b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>0.841470984807897</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">SQRT\r\n</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the square root of a number <br/>\r\n\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT SQRT(49);</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> SQRT(49) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>7</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">SQUARE\r\n</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the square of a number <br/>\r\n\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT SQUARE(12);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> SQUARE(12)</b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>144</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
<tr>
\r\n
<td valign=\"top\">TAN\r\n</td>
\r\n\r\n
<td valign=\"top\">
<b>Returns the tangent of a number <br/>\r\n\t<br/></b>\r\n\r\n
<div class=\"containerExample\">SQL>  SELECT TAN(1);\r\n</div>
\r\n\r\n
<p>The above query would produce the following result:</p>
\r\n\r\n
<table id=\"customers\">
\r\n\r\n
<tr>
</th>\r\n
<th align=center><b> TAN(1) </b></th>
\r\n
</tr>
\r\n\r\n
<tr>
\r\n
<td>1.5574077246549</td>
\r\n
</tr>
\r\n
</table>
</td>
\r\n\r\n
</tr>
\r\n\r\n\r\n
</table>
\r\n\r\n\r\n
</body>
\r\n</html>"
my Flutter code:-
Html(
customRender: {
"table": (context, child) {
return Container(
child: Scrollbar(
thumbVisibility:
true, //always show scrollbar
thickness:
5, //width of scrollbar
radius: Radius.circular(
30), //corner radius of scrollbar
scrollbarOrientation:
ScrollbarOrientation
.bottom,
child: Container(
padding:
EdgeInsets.only(
bottom: 10),
child:
SingleChildScrollView(
physics:
BouncingScrollPhysics(),
scrollDirection:
Axis.horizontal,
child: (context
.tree
as TableLayoutElement)
.toWidget(
context),
),
),
),
);
},
},
data: snapshot
.data!
.resultList![index]
.topicWEB,
onLinkTap:
(url, _, __, ___) async {
print("Opening $url...");
},
onCssParseError:
(css, messages) {
print(
"css that errored: $css");
print("error messages:");
messages.forEach((element) {
print(element);
});
},
),
Flutter html is not that good in handling tables. You can use flutter_inappwebview.
It will automatically handle the tables under html data.