Unsorted bullet point list <ul> adds missing symbol after each circle [iOS](v1.0.2)

[joelbrostrom]

After each bullet point in a bullet list a "crossed box" symbol is rendered before the list item.
This only effect iOS.

The structure looks like this:

<p>
<ul>
    <li>Text1</li>
    <li>Text2</li>
    <li>
        <ul>
            <li>Text3</li>
            <li>Text4</li>
            <li>Text5</li>
        </ul>
    </li>
</ul>
</p>

and it renders like this:

[joelbrostrom]

Even using the example from the Example section

<h3>List support:</h3>
      <ol>
            <li>This</li>
            <li><p>is</p></li>
            <li>an</li>
            <li>
            ordered
            <ul>
            <li>With<br /><br />...</li>
            <li>a</li>
            <li>nested</li>
            <li>unordered
            <ol>
            <li>With a nested</li>
            <li>ordered list.</li>
            </ol>
            </li>
            <li>list</li>
            </ul>
            </li>
            <li>list! Lorem ipsum dolor sit amet.</li>
            <li><h2>Header 2</h2></li>
            <h2><li>Header 2</li></h2>
      </ol>

results in this on iOS:

[joelbrostrom]

This is a breaking change in one of the most fundamental tags and should be given high priority.
All iOS devices can't currently use the plugin, and since it enforced migration in 1.0.0 you cant just revert to < 1.0.0.
Can someone please give this some attention.

[joelbrostrom]

I found the root of the problem.

For some reason \t does not render as tab on iOS but instead shows the reported icon above.
This is not a problem of \t itself. Just typing it in a string outside of the package will render a tab (white space) so something is happening in between.

I temporarily fixed it by removing the tab and add padding to the text widget instead.

html_parser.dart - line 271
Current

PositionedDirectional(                              
  width: 30, //TODO derive this from list padding.  
  start: 0,                                         
  child: Text('${newContext.style.markerContent}\t',
      textAlign: TextAlign.right,                   
      style: newContext.style.generateTextStyle()), 
),                                                  

Fix

PositionedDirectional(                               
  width: 30, //TODO derive this from list padding.   
  start: 0,                                          
  child: Padding(padding: EdgeInsets.only(right: 16),
    child: Text('${newContext.style.markerContent}', 
        textAlign: TextAlign.right,                  
        style: newContext.style.generateTextStyle()),
  ),                                                 
),                                                   

I don't know how much a tab is supposed to indent the text, or if this is the desired way of solving it.
If it is i can make a MR

[aravindhkumar23]

Hi @joelbrostrom Thanks for the workaround,
Will it take time to get the new release with this changes, Because I got the issue reported from my client and app needs version update asap.

[joelbrostrom]

Hi!
It's more a question of the right way of solving it.
Right now I just add some arbitrary padding that looks good for my use case, but I assume a \t tab is rendered differently in different situations and on different devices.

In the meantime you can either modify the code yourself or use my fork until it's solved on the main branch by replacing the pubspec.yaml dependency to this:

  # flutter_html: ^1.0.2 #This should replace the forked repo on @joelbrostrom 's repo once the bullet point bug is fixed
  flutter_html: #This is a fork of 1.0.2 that fixes the error icons popping up after each bullet point.
    git:
      url: https://github.com/joelbrostrom/flutter_html.git

[aravindhkumar23]

@joelbrostrom thanks for the swift reply.
I will try to use the git repo which you provided.

[viniciusaro]

Same problem reported here: #327 just for reference

[tneotia]

Took care of this in the above PR, it was related to the font size. Basically it now has a separate text widget just for the tab character without any text styling so the unknown character box doesn't show up.