Flutter Widget from HTML

A Flutter plugin for building Flutter-widget tree from html.

This package extends the flutter_widget_from_html_core package with extra functionalities by using external depedencies like cached_network_image or url_launcher. It should be good enough as a quick starting point but you can always use the core directly if you dislike the dependencies.

Usage

To use this plugin, add flutter_widget_from_html as a dependency in your pubspec.yaml file.

See the Example app for inspiration.

Example

Note: HtmlWidget.config is optional, see dartdoc for all available configuration keys and their default values.

const kHtml = '''
<h1>Heading</h1>
<p>A paragraph with <strong>strong</strong> <em>emphasized</em> text.</p>
<ol>
  <li>List item number one</li>
  <li>
    Two
    <ul>
      <li>2.1 (nested)</li>
      <li>2.2</li>
    </ul>
  </li>
  <li>Three</li>
</ol>
<p>And YouTube video!</p>
<iframe src="https://www.youtube.com/embed/jNQXAC9IVRw" width="560" height="315"></iframe>
''';

class HelloWorldScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('HelloWorldScreen'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: HtmlWidget(
            kHtml,
            webView: true,
          ),
        ),
      );
}

Features

HTML tags

Below tags are the ones that have special meaning / styling, all other tags will be parsed as text.

A: underline, theme accent color, launch url via url_launcher, support base url resolver.
H1/H2/H3/H4/H5/H6
IFRAME via WebView. Available configurations:
- .webView, default=false
- .webViewJs, default=true
- .webViewPadding
- To render IFRAME as web view: set webView=true in config and setup iOS project manually.
- If the IFRAME has no width and height attributes, the web view will be rendered initially in a 16:9 box and automatically resize itself afterwards.
IMG with support for asset (asset://), data uri and network image via CachedNetworkImage
LI/OL/UL with support for:
- Attributes: type, start, reversed
- Inline style list-style-type values: lower-alpha, upper-alpha, lower-latin, upper-latin, circle, decimal, disc, lower-roman, upper-roman, square
TABLE/CAPTION/THEAD/TBODY/TFOOT/TR/TD/TH with support for:
- Attribute: <table border="1">
- Inline style: <table style="border: 1px solid #f00">
SVG via flutter_svg
VIDEO via chewie
ABBR, ACRONYM, ADDRESS, ARTICLE, ASIDE, B, BIG, BLOCKQUOTE, BR, CENTER, CITE, CODE,
DD, DEL, DFN, DIV, DL, DT, EM, FIGCAPTION, FIGURE, FONT, FOOTER, HEADER, HR, I, INS,
KBD, MAIN, NAV, P, PRE, Q, RP, RT, RUBY, S, SAMP, SECTION, STRIKE, STRONG, SUB, SUP, TT, U, VAR

These tags and their contents will be ignored:

SCRIPT
STYLE

Attributes

dir: auto, ltr and rtl

Inline stylings

border-top, border-bottom: overline/underline with support for dashed/dotted/double/solid style
color: hex values, rgb(), hsl() or named colors
direction (similar to dir attribute)
font-family
font-size: absolute (e.g. xx-large), relative (larger, smaller) and value in em/px
font-style: italic/normal
font-weight: bold/normal/100..900
line-height: number, percentage or normal
margin and margin-xxx (values in px, em)
padding and padding-xxx (values in px, em)
vertical-align: baseline/top/bottom/middle/sub/super
text-align: center/justify/left/right
text-decoration: line-through/none/overline/underline
text-overflow: clip/ellipsis. Note: text-overflow: ellipsis should be used in conjuntion with max-lines or -webkit-line-clamp for better result.
Sizing (width & height, max-xxx, min-xxx) with values in px, em