Skip to content
A Flutter widget for rendering static html as Flutter widgets (Will render over 70 different html tags!)
Branch: master
Clone or download
Latest commit 56ba649 May 21, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci Setup CI - Fix config Feb 5, 2019
.idea/codeStyles Initial commit Aug 14, 2018
android/app/src/main/java/io/flutter/plugins Initial release Aug 14, 2018
example Version 0.9.5 Mar 12, 2019
lib Version 0.10.1 May 21, 2019
test Update tests to account for breaking change in 0.10.0 May 19, 2019
.gitignore Version 0.9.0 Feb 1, 2019
CHANGELOG.md Version 0.10.1 May 21, 2019
LICENSE Version 0.9.0 Feb 1, 2019
README.md Version 0.10.1 May 21, 2019
pubspec.lock Version 0.9.9 May 18, 2019
pubspec.yaml Version 0.10.1 May 21, 2019

README.md

flutter_html

pub package CircleCI

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

Installing:

Add the following to your pubspec.yaml file:

dependencies:
  flutter_html: ^0.10.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

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
  },
  customRender: (node, children) {
    if(node is dom.Element) {
      switch(node.localName) {
        case "video": return Chewie(...);
        case "custom_tag": return CustomWidget(...);
      }
    }
  },
)

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).

You can’t perform that action at this time.