A Flutter widget for rendering static html as Flutter widgets

  packages, Packages, UI, Widgets

flutter_html

Note: 1.0.0-pre.1 has been released! See the Migration Guide if you’d like to take advantage of all the new features of 1.0.0! Also, check out the Prerelease Changelog. Version 1.0.0 is currently on the new-parser branch. This README will be updated when 1.0.0 is merged into the master branch.

A Flutter widget for rendering static html tags as Flutter widgets. (Will render over 70 different html tags!)

A Screenshot of flutter_html

Installing:

Add the following to your pubspec.yaml file:

dependencies:
  flutter_html: ^0.11.1

Currently Supported HTML Tags:

a, abbr, acronym, address, article, aside, b, bdi, bdo, big, blockquote, body, br, caption, cite, code, data, dd, del, dfn, div, dl, dt, em, figcaption, figure, footer, h1, h2, h3, h4, h5, h6, header, hr, i, img, ins, kbd, li, main, mark, nav, noscript, ol, p, pre, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, sup, table, tbody, td, template, tfoot, th, thead, time, tr, tt, u, ul, var

Roadmap

View the development roadmap in the wiki

Partially supported elements:

These are common elements that aren’t yet fully supported, but won’t be ignored and will still render somewhat correctly.

center, font

List of planned supported elements:

These are elements that are planned, but present a specific challenge that makes them somewhat difficult to implement.

audio, details, source, summary, svg, track, video, wbr

List of elements that I don’t plan on implementing:

Feel free to open an issue if you have a good reason and feel like you can convince me to implement them. A well written and complete pull request implementing one of these is always welcome, though I cannot promise I will merge them.

Note: These unsupported tags will just be ignored.

applet, area, base, basefont, button, canvas, col, colgroup, datalist, dialog, dir, embed, fieldset, form, frame, frameset, head, iframe, input, label, legend, link, map, meta, meter, noframe, object, optgroup, option, output, param, picture, progress, script, select, style, textarea, title

Why this package?

This package is designed with simplicity in mind. Flutter currently does not support rendering of web content into the widget tree. This package is designed to be a reasonable alternative for rendering static web content until official support is added.

Update:

The official Flutter WebView package has been created and is in a developer preview. It’s not stable yet, so I’ll continue to support this project at least until webview_flutter hits 1.0.0.

Check out the official Flutter WebView package here: https://pub.dartlang.org/packages/webview_flutter

Example Usage:

Html(
  data: """
    <!--For a much more extensive example, look at example/main.dart-->
    <div>
      <h1>Demo Page</h1>
      <p>This is a fantastic nonexistent product that you should buy!</p>
      <h2>Pricing</h2>
      <p>Lorem ipsum <b>dolor</b> sit amet.</p>
      <h2>The Team</h2>
      <p>There isn't <i>really</i> a team...</p>
      <h2>Installation</h2>
      <p>You <u>cannot</u> install a nonexistent product!</p>
      <!--You can pretty much put any html in here!-->
    </div>
  """,
  //Optional parameters:
  padding: EdgeInsets.all(8.0),
  backgroundColor: Colors.white70,
  defaultTextStyle: TextStyle(fontFamily: 'serif'),
  linkStyle: const TextStyle(
    color: Colors.redAccent,
  ),
  onLinkTap: (url) {
    // open url in a webview
  },
  onImageTap: (src) {
    // Display the image in large form.
  },
  //Must have useRichText set to false for this to work.
  customRender: (node, children) {
    if(node is dom.Element) {
      switch(node.localName) {
        case "video": return Chewie(...);
        case "custom_tag": return CustomWidget(...);
      }
    }
  },
  customTextAlign: (dom.Node node) {
    if (node is dom.Element) {
      switch (node.localName) {
        case "p":
          return TextAlign.justify;
      }
    }
  },
  customTextStyle: (dom.Node node, TextStyle baseStyle) {
    if (node is dom.Element) {
      switch (node.localName) {
        case "p":
          return baseStyle.merge(TextStyle(height: 2, fontSize: 20));
      }
    }
    return baseStyle;
  },
)

useRichText parameter

This package has a known issue where text does not wrap correctly. Setting useRichText to true fixes the issue by using an alternate parser. The alternate parser, however, does not support the customRender callback, and several elements supported by the default parser are not supported by the alternate parser (see #61 for a list).

Download Flutter Html Widget Source Code on GitHub

https://github.com/Sub6Resources/flutter_html