Unordered list text not aligned and varied in size

[t-payne]

On one of my screens, as a child in a ListView, I'm trying to render an unordered list, like this one:

<ul>
 <li>
  <b>Lorem</b> ipsum dolor sit amet, consectetur adipiscing elit.
 </li>
 <li>
  <b>Quisque</b>, "quis lorem at libero pellentesque condimentum id consequat mi."
 </li>
 <li>
  <b>Sed eleifend</b> vehicula nulla in dapibus.
  <ul>
   <li>
    Ut lacinia enim at augue dignissim ornare.
   </li>
   <li>
    In hac habitasse platea dictumst.
   </li>
  </ul>
 </li>
 <li>
  <b>Interdum</b>: et malesuada fames ac ante ipsum
 </li>
</ul>

When I create a basic Html widget, Html(data: this.tool.content),, the text in every list item after the 1st is offset a little bit.

Also, when I try to increase the size of the text, the text size begins to vary, as can be seen in the next image.

Html(
  data: this.tool.content,
  style: {"ul": Style(fontSize: FontSize.percent(105))},
),

Lastly, is there a way for me to specify that I don't want the list indented? Meaning, the top level bullets line up with my "Steps" heading (see images).

I'm using flutter_html version 1.2.0.

[tneotia]

I suggest upgrading to 2.0.0-nullsafety.1 as I cannot reproduce the first issue:

As for the second issue, that is because you use a percentage based font size. When that cascades, it applies the percent to each and every child. So your first ul has font size original * 1.05 but the nested ul will have original * 1.05 * 1.05 so it appears slightly bigger. To fix this issue you can use a fixed font size rather than percentage based.

For the third issue in the latest versions you can set your ul padding in Style to whatever you like, in your case EdgeInsets.zero will likely do the trick. The default is 10 which is why it appears indented.

[t-payne]

Thank you @tneotia for your help on this. So I've been able to overcome the first two issues. The first issue was overcome by removing characters from the html String that are there to make the String more readable (i.e. "pretty"). The second issue was overcome as you suggested to move away from the percentage based font size.

Html(
  data: this
      .tool
      .content
      .replaceAll("\n", "")
      .replaceAll("\r", "")
      .replaceAll(RegExp(r'ul>\s+'), "ul>")
      .replaceAll(RegExp(r'li>\s+'), "li>"),
  style: {
    "ul": Style(
      fontSize: FontSize.large,
      padding: EdgeInsets.zero,
    )
  },
),

The padding wasn't overcome with EdgeInsets.zero, though (still using flutter_html 1.2.0).

Is this something that will be overcome if I upgrade my flutter_html or do you have any suggestions for 1.2.0?

[tneotia]

Once you upgrade to v2.0.0 (any pre-release version) the padding change will work. My PR at #537 was merged around 2 months ago, so 1.2.0 does not have the padding support for lists.

See #279 for the original feature request for list padding.

[erickok]

I will close this as this is effectively fixed.