Lists not handled correctly [1.0.0]

[Sub6Resources]

NOTE: This is an issue with code that hasn't been released yet.

List items with content that wraps wraps so that it places content underneath the list character, rather than to the right of the list character. Additionally, ol list characters should not affect the left margin of the list item's content.

[SvenSchoene]

First of all: this library works great so far!

However, we have a pretty list-heavy webpage to display and this issue kills the layout.
Do you have any idea when you'll get around to dealing with this?

[Sub6Resources]

Which version of flutter_html are you on. Also, what specific issues are you seeing with the layout?

[SvenSchoene]

We are using flutter_html: ^0.10.4.

Here's some HTML and two screenshots, one with useRichText enabled, and one with it being disabled.

The code is not pretty, but it's autogenerated, so I'm not that flexible.

The obvious alternative here is to switch to a "real" webview. However, one of my colleagues implemented this with flutter_html and I'm surprised by how good the result is. If the spacing issue would be gone there'd be absolutely no reason to use a webview.

<div id="iubenda_policy" class="iubenda_fluid_policy iubenda_embed_policy ">
  <div id="wbars_all">
    <div class="iub_container iub_base_container">
      <div id="wbars">
        <div class="iub_content legal_pp">
          <div class="iub_header">
            <h1>Privacy Policy of <strong>xxxxxxxx</strong></h1>
            <p>This Application collects some Personal Data from its Users.</p>
          </div> <!-- /header -->
          <div class="simple_pp">
            <div class="one_line_col">
              <h2 style="text-align: center; font-variant:small-caps;">Policy summary</h2>
            </div> <!-- /one_line_col -->
            <h2 id="purposes_data">Personal Data collected for the following purposes and using the following
              services:</h2>
            <ul class="for_boxes cf">
              <li class="one_line_col">
                <ul class="for_boxes">
                  <li>
                    <div class="iconed policyicon_purpose_5">
                      <h3>Analytics</h3>
                      <ul class="unstyled">
                        <li>
                          <h3>Google Analytics for Firebase</h3>
                          <p>Personal Data: Application opens; Application updates; Cookies; device information; first
                            launches; geography/region; In-app purchases; number of sessions; number of Users ;
                            operating systems; session duration; unique device identifiers for advertising (Google
                            Advertiser ID or IDFA, for example); Usage Data</p>
                        </li>
                        <li>
                          <h3>Google Analytics</h3>
                          <p>Personal Data: Cookies; Usage Data</p>
                        </li>
                      </ul>
                    </div>
                  </li>
                  <li>
                    <div class="iconed policyicon_purpose_17">
                      <h3>Location-based interactions</h3>
                      <ul class="unstyled">
                        <li>
                          <h3>Non-continuous geolocation</h3>
                          <p>Personal Data: geographic position</p>
                        </li>
                      </ul>
                    </div>
                  </li>
...

useRichText enabled:

useRichText disabled:

[Sub6Resources]

There's going to be a pretty big change in the way the package parses the html in version 1.0.0 of flutter_html. The changes being made rely on some changes in the flutter framework that haven't yet reached the stable channel, so I'm waiting to release version 1.0.0 until the framework changes are pushed to the stable channel (which should be in the late summer or early fall if Flutter follows the usual release schedule).

The fixes for lists probably won't be released until 1.0.0 is released. I'll be releasing some preview builds of 1.0.0 in the next month or so that contain those fixes if you're willing to switch to a less stable Flutter release channel (currently the dev channel), but I understand this isn't great for a production app, so you're best bet now is probably to use the webview plugin.

[SvenSchoene]

Thank you for the status update on this.
I'm perfectly happy to both, try out a preview version in a few weeks, as well as wait for the new stable version of Flutter (because maybe we're daring to release a production-app with a non-stable Flutter channel... 😱 We'll see! 😄 )

[samarthagarwal]

Any way I can get around this issue?

[Sub6Resources]

This has been fixed in 1.0.0. See #122 for updates on its release.