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(...),
);

Но если нужно его раскрасить или что-то ещё, всё становится сложнее. Продолжение по ссылке.