Flutter - Отображение HTML неупорядоченного списка

Question

Я пытаюсь представить код HTML во Flutter ( ul , чтобы указать c) и минимально стилизовать его. Я пробовал использовать пакет flutter_ html и вижу, что есть опция customRender.

По сути, то, что я пытаюсь сделать:

• Добавить пробел под каждым элементом li .
• Уберите левое поле (оно есть по умолчанию на flutter_ html).
• Измените цвет маркера. Нет, необходимо, но было бы неплохо.

Я новичок во Flutter и Dart, поэтому мне не удается заставить работать customRender. Может, кто-нибудь знает, как go обойти это? Или, может быть, есть лучший способ сделать это?

---

Добавление некоторой ссылки на код.

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;
    },
  )
)

Примечание: при извлечении блока customRender получается левый margin.

---

EDIT: Дополнение к решению vb10 , которое позволяет тексты элементов многострочного списка.

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),
    ]
  );
}

Answer 1

Вы не забываете два правила:

• Вы можете создать собственный виджет, чтобы для форматированного текста было установлено значение false (по умолчанию True)
• У вас есть настраиваемые параметры виджета, требующие поля страницы как расстояние между элементами.

Посмотрите на этот код:

 Html(
    data: data,
    useRichText: false,
    customRender: htmlCustomRenderer,
  )

Если вы подробно посмотрите на это . (lib / html -parser)

Результат: