flutter_widget_from_html

A Flutter package for building Flutter widget tree from HTML with support for IFRAME, VIDEO and many other tags.

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 package, add flutter_widget_from_html as a dependency in your pubspec.yaml file.

See the Demo app for inspiration.

Example

const kHtml = '''
<h3>Heading</h3>
<p>
  A paragraph with <strong>strong</strong>, <em>emphasized</em>
  and <span style="color: red">colored</span> text.
  With an inline <a href="https://flutter.dev">Flutter</a> logo,
  like this: <img src="https://github.com/daohoangson/flutter_widget_from_html/raw/master/demo_app/logos/android.png" style="width: 1em" />.
</p>

<ol>
  <li>List item number one</li>
  <li>
    Two
    <ul>
      <li>2.1</li>
      <li>2.2</li>
    </ul>
  </li>
</ol>

<p>&lt;IFRAME&gt; of YouTube:</p>
<iframe src="https://www.youtube.com/embed/jNQXAC9IVRw" width="560" height="315"></iframe>
<br />

<table border="1" cellpadding="8">
  <tr><td colspan="2">&lt;TABLE&gt; colspan=2</td></tr>
  <tr>
    <td rowspan="3">rowspan=3</td>
    <td>&lt;SUB&gt; C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub></td>
  </tr>
  <tr><td>&lt;SUP&gt; <var>a<sup>2</sup></var> + <var>b<sup>2</sup></var> = <var>c<sup>2</sup></var></td></tr>
  <tr><td>&lt;RUBY&gt; <ruby>明日 <rp>(</rp><rt>Ashita</rt><rp>)</rp></ruby></td></tr>
  
</table>

''';

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

void main() => runApp(MaterialApp(home: HelloWorldScreen()));

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. Additional .svg file support via flutter_svg.
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:
- TABLE attributes (border, cellpadding) and inline style (border)
- TD/TH attributes colspan, rowspan via flutter_layout_grid
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

background (color only), background-color: hex values, rgb(), hsl() or named colors
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) or values in em, %, pt and px
font-style: italic/normal
font-weight: bold/normal/100..900
line-height: normal number or values in em, %, pt and px
margin and margin-xxx: values in em, pt and px
padding and padding-xxx: values in em, pt and px
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 em, pt and px

Extensibility

See flutter_widget_from_html_core for details.

Libraries

flutter_widget_from_html

flutter_widget_from_html package

Flutter Widget from HTML