title: Flutter - Rendering a HTML Unordered List
body: <p>I’m trying to represent HTML code in Flutter (<strong>ul</strong> to be specific) and minimally style it. I tried using the <strong>flutter_html</strong> package, and I see there’s a customRender option.</p>
  
  <p>Basically, what I’m trying to do:</p>
  
  <ul>
  <li>Add a space under every <strong>li</strong> element.</li>
  <li>Take away the left margin (it's there by default on flutter_html).</li>
  <li>Change the color of the bullet point. Not, necessary, but would be nice.</li>
  </ul>
  
  <p>I'm pretty new to Flutter and Dart, so I can't manage to make the customRender work. Perhaps someone knows how to go around it? Or maybe there's a better way to do it?</p>
  
  <hr>
  
  <p>Adding some code fore reference.</p>
  
  <pre class="lang-dart prettyprint-override"><code>import 'package:flutter_html/flutter_html.dart';
  
  // ... Some non-essential code ...
  
  Align(
    alignment: Alignment.centerLeft,
    child: Html(
      data: """${unorderedList}""",
      customRender: (node, children) {
        if (node is dom.Element) {
          switch (node.localName) {
            case "li":
              return Column(children: children);
          }
        }
        return null;
      },
    )
  )
  </code></pre>
  
  <p>Note: taking out the <strong>customRender</strong> block produces a left margin.</p>
  
  <hr>
  
  <p>EDIT: Addition to the <strong>vb10</strong> solution that allows multiline list item texts.</p>
  
  <pre class="lang-dart prettyprint-override"><code>Wrap customListItem(dom.Element node) {
    return Wrap(
      spacing: 25.0,
      children: [
        Row(
          crossAxisAlignment: CrossAxisAlignment.start, 
          children: [
            Padding(
              // Top padding adjusts for text offset, set it to the font size.
              padding: const EdgeInsets.only(top: 18.0, right: 15.0), 
              child: CircleAvatar(radius: 4)
            ),
            Expanded(child: Text(node.text)),
          ]
        ),
        SizedBox(height: 25.0),
      ]
    );
  }
  </code></pre>