HTML elements not rendering properly (Displaying some gebberish characters instead)

[gaurav822]

Describle th bug: I have used Django backend for my project where MathType library is used to get HTML math symbols but when I'm fetching the data from backend some symbols are not rendering properly. Most of them are math symbols. The components is rendering easily if used as individual component but when whole HTML data is used I'm getting gibberish characters shown in the screenshot.

HTML to reproduce the issue: Some of the tags that are not rendered properly are below:

1. <p>or, v = u – gt<sub>1</sub> [ since, a = - g, for ball moving upward]</p>
2. <p>s = ut + ½ at<sup>2</sup></p>
3. <p>or, h = 20&nbsp;× 2 – ½ × 10 × 2<sup>2</sup></p>
4. <img class="Wirisformula" style="max-width:none;vertical-align:-10px;" role="math" alt="begin mathsize 10px style square root of fraction numerator 2 h over denominator g end fraction end root end style" height="29" width="28" data-mathml="«math xmlns=¨http://www.w3.org/1998/Math/MathML¨»«mstyle mathsize=¨10px¨»«msqrt»«mfrac»«mrow»«mn»2«/mn»«mi»h«/mi»«/mrow»«mi»g«/mi»«/mfrac»«/msqrt»«/mstyle»«/math»" src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Awrs%3D%22http%3A%2F%2Fwww.wiris.com%2Fxml%2Fmathml-extension%22%20height%3D%2229%22%20width%3D%2228%22%20wrs%3Abaseline%3D%2219%22%3E%3C!--MathML%3A%20%3Cmath%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1998%2FMath%2FMathML%22%3E%3Cmstyle%20mathsize%3D%2210px%22%3E%3Cmsqrt%3E%3Cmfrac%3E%3Cmrow%3E%3Cmn%3E2%3C%2Fmn%3E%3Cmi%3Eh%3C%2Fmi%3E%3C%2Fmrow%3E%3Cmi%3Eg%3C%2Fmi%3E%3C%2Fmfrac%3E%3C%2Fmsqrt%3E%3C%2Fmstyle%3E%3C%2Fmath%3E--%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%2F%3E%3C%2Fdefs%3E%3Cpolyline%20fill%3D%22none%22%20points%3D%227%2C-25%207%2C-25%203%2C-1%201%2C-10%22%20stroke%3D%22%23000000%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%221%22%20transform%3D%22translate(0.5%2C27.5)%22%2F%3E%3Cpolyline%20fill%3D%22none%22%20points%3D%223%2C-1%201%2C-10%200%2C-9%22%20stroke%3D%22%23000000%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%221%22%20transform%3D%22translate(0.5%2C27.5)%22%2F%3E%3Cline%20stroke%3D%22%23000000%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%221%22%20x1%3D%228.5%22%20x2%3D%2226.5%22%20y1%3D%222.5%22%20y2%3D%222.5%22%2F%3E%3Cline%20stroke%3D%22%23000000%22%20stroke-linecap%3D%22square%22%20stroke-width%3D%221%22%20x1%3D%2210.5%22%20x2%3D%2224.5%22%20y1%3D%2215.5%22%20y2%3D%2215.5%22%2F%3E%3Ctext%20font-family%3D%22Arial%22%20font-size%3D%2210%22%20text-anchor%3D%22middle%22%20x%3D%2214.5%22%20y%3D%2211%22%3E2%3C%2Ftext%3E%3Ctext%20font-family%3D%22Arial%22%20font-size%3D%2210%22%20font-style%3D%22italic%22%20text-anchor%3D%22middle%22%20x%3D%2220.5%22%20y%3D%2211%22%3Eh%3C%2Ftext%3E%3Ctext%20font-family%3D%22Arial%22%20font-size%3D%2210%22%20font-style%3D%22italic%22%20text-anchor%3D%22middle%22%20x%3D%2217.5%22%20y%3D%2225%22%3Eg%3C%2Ftext%3E%3C%2Fsvg%3E" align="middle">

Html widget configuration:

Html(data: chapter.questions[index]["answer"]),

I'm fetching my whole HTML data in this component => chapter.questions[index]["answer"])

Expected behavior: The expected results for above 3 tags are:

1. or, v = u – gt1 [ since, a = - g, for ball moving upward]
2. s = ut + ½ at2
3. square root of (2h/g)

Screenshots:

Device details and Flutter/Dart/flutter_html versions: I'm using latest version of flutter_html which is 2.2.1 and I tried using two device first real device (Samsung M20) and second one is virtual emulator (Pixel 3 API 28). Got this error on both devices.

Stacktrace/Logcat N/A