Отображение HTML-тегов в Flutter

Hola, Amigos! На связи Павел Гершевич, Flutter Team Lead в Amiga. Сегодня поговорим про отображение HTML-тегов как виджетов в наших приложениях на Flutter.

Чаще всего для этого используется библиотека flutter_html:

Html(data: ‘<p>Hello World</p>’);

Но у нее есть несколько минусов:

🔴 Она больше года не обновлялась, что с одной стороны хорошо, так как она стабильна, а с другой — она уже устаревает.
🔴 В ней есть баги. Например, если внутри тега <p> окажется список (<ul>, <ol>), то снизу появляется отступ, равный высоте списка.
🔴 Не очень понятная система стилизации. Чтобы что-то изменить, нужно разобраться, как это делается, так как вместо CSS-атрибутов используются собственные подходы.

Пример стилизации, где нужно поменять размер шрифта для всего документа:

  data: ...,
  style: {
    ‘*’: Style(
      fontSize: FontSize(15),
    ),
  }
);

Столкнувшись с этими минусами, мы решили перейти на вторую по популярности библиотеку — flutter_widget_from_html_core. Во-первых, она лишена вышеописанных багов. Во-вторых, она модульная, и к ней можно многое прикрутить.

HtmlWidget(‘<p>Hello World</p>’);

Со стилями всё интереснее. Шрифт устанавливается через стандартный TextStyle:

  ...,
  textStyle: TextStyle(...),
);

Но если нужно его раскрасить или что-то ещё, всё становится сложнее, так как для каждого элемента нужно указать стили в виде CSS.

HtmlWidget(
  ...,
  customStylesBuilder: (element) {
    if (element.localName == ‘p’) {
      return {‘color’: ‘red’};
    }
    return {};
  },
);

Если вам нужно больше возможностей, например, работа с видео, аудио, SVG картинками, кеширование изображений, вы можете воспользоваться расширенной версией этой библиотеки — flutter_widget_from_html, или добавить необходимые дополнения самостоятельно.

А чем вы пользуетесь на своих проектах для отображения HTML как виджетов?⚙️