flutter_html 0.11.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 100

flutter_html #

pub package CircleCI

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

[0.11.1] - December 14, 2019:

  • Add support for AssetImages using the asset: prefix (#162).

[0.11.0] - September 10, 2019:

  • Make it so width=100% doesn't throw error. Fixes #118.
  • You can now set width and/or height in ImageProperties to negative to ignore the width and/or height values from the html. Fixes #97
  • The img alt property now renders correctly when the image fails to load and with the correct style. Fixes #96
  • Add partial support for sub tag.
  • Add new option: shrinkToFit (#148). Fixes #75.

[0.10.4] - June 22, 2019:

  • Add support for customTextStyle to block and specialty HTML elements.

[0.10.3] - June 20, 2019:

  • Add src to the onImageTap callback (#93)

[0.10.2] - June 19, 2019:

  • Add customTextAlign property (#112)
  • Use tryParse instead of parse for image width and height attributes so that % values are ignored safely. Fixes #98

[0.10.1] - May 20, 2019:

  • Image properties and onImageTap for the richTextParser, plus some fixes (#90)
  • Hotfix 1 (June 6, 2019): Fixes #100

[0.10.0] - May 18, 2019:

  • BREAKING: useRichText now defaults to true
  • Support for aside, bdi, big, cite, data, ins, kbd, mark, nav, noscript, q, rp, rt, ruby, s, samp, strike, template, time, tt, and var added to RichText parser.

[0.9.9] - May 17, 2019:

  • Fixes extra padding issue (#87)

[0.9.8] - May 14, 2019:

  • Add support for address tag in RichText parser.

[0.9.7] - May 13, 2019:

  • Added onImageError callback
  • Added custom textstyle and edgeinsets callback (#72)
  • Update dependency versions (#84)
  • Fixes #82 and #86

[0.9.6] - March 11, 2019:

  • Fix whitespace issue. (#59)

[0.9.5] - March 11, 2019:

  • Add support for span in RichText parser. (#61)
  • Adds linkStyle attribute. (#70)
  • Adds tests for header, hr, and i (#62)

[0.9.4] - February 5, 2019:

  • Fixes table error in RichText parser. (#58)

[0.9.3] - January 31, 2019:

  • Adds support for base64 encoded images

[0.9.2] - January 31, 2019:

  • Adds partial support for deprecated font tag.

[0.9.1] - January 31, 2019:

  • Adds full support for sub and sup. (#46)
  • Fixes weak warning caught by Pub analysis (#54)

[0.9.0] - January 31, 2019:

  • Adds an alternate RichText parser and useRichText parameter. (#37)

[0.8.2] - November 1, 2018:

  • Removes debug prints.

[0.8.1] - October 19, 2018:

  • Adds typedef for onLinkTap function.

[0.8.0] - October 18, 2018:

  • Adds custom tag callback
  • Logging no longer shows up in production.

[0.7.1] - September 11, 2018:

  • Fixes issue with text nodes that contain only a space. (#24)
  • Fixes typo in README.md from 0.7.0.

[0.7.0] - September 10, 2018:

  • Adds full support for ul and ol

[0.6.2] - September 5, 2018:

  • Adds check for img src before trying to load it.
  • Adds support for img alt attribute.

[0.6.1] - September 4, 2018:

  • Fixed minor typo

[0.6.0] - September 4, 2018:

  • Update README.md and example
  • GitHub version 0.6.0 milestone reached

[0.5.6] - September 4, 2018:

  • Adds partial support for center and a renderNewlines property on the Html widget.

[0.5.5] - September 4, 2018:

  • Adds support for acronym, and big.

[0.5.4] - August 31, 2018:

  • Adds onLinkTap callback.

[0.5.3] - August 25, 2018:

  • Adds support for strike, and tt.

[0.5.2] - August 25, 2018:

  • Adds support for bdi and bdo

[0.5.1] - August 25, 2018:

  • Fixed issue with table rows not lining up correctly (#4)

[0.5.0] - August 23, 2018:

  • Major refactor that makes entire tree a Widget and eliminates the need to distinguish between inline and block elements.
  • Fixed #7, #9, #10, and #11.

[0.4.1] - August 15, 2018:

  • Fixed issue with images not loading when inside of p tag (#6)

[0.4.0] - August 15, 2018:

  • Adds support for table, tbody, tfoot, thead, tr, td, th, and caption

[0.3.1] - August 15, 2018:

  • Fixed issue where p was not rendered with the defaultTextStyle.

[0.3.0] - August 15, 2018:

  • Adds support for abbr, address, article, aside, blockquote, br, cite, code, data, dd, del, dfn, dl, dt, figcaption, figure, footer, header, hr, img, ins, kbd, li, main, mark, nav, noscript, pre, q, rp, rt, ruby, s, samp, section, small, span, template, time, and var

  • Adds partial support for a, ol, and ul

[0.2.0] - August 14, 2018:

  • Adds support for img.

[0.1.1] - August 14, 2018:

  • Fixed b to be bold, not italic...
  • Adds support for em, and strong
  • Adds support for a default TextStyle

[0.1.0] - August 14, 2018:

  • Renamed widget from HtmlWidget to Html
  • Adds support for p, h1, h2, h3, h4, h5, and h6.

[0.0.1] - August 14, 2018:

  • Adds support for body, div, b, i, and u.

example/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:html/dom.dart' as dom;

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: SingleChildScrollView(
          child: Html(
            data: """
    <div>
      <div id="header_set">
      <h1>Header 1</h1>
      <h2>Header 2</h2>
      <h3>Header 3</h3>
      <h4>Header 4</h4>
      <h5>Header 5</h5>
      <h6>Header 6</h6>
      <hr />
      Below hr
      <b>Bold</b>
      </div>
      <h1>Demo Page</h1>
      <p>This is a <u>fantastic</u> nonexistent product that you should really really really consider buying!</p>
      <a href="https://github.com">https://github.com</a><br />
      <br />
      <h2>Pricing</h2>
      <p>Lorem ipsum <b>dolor</b> sit amet.</p>
      <center>
        This is some center text... <abbr>ABBR</abbr> and <acronym>ACRONYM</acronym>
      </center>
      <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>
      <h2>Don't ask me to find <em>x</em> in</h2>
      <p>log<sub>2</sub>(<em>x</em><sup>2</sup> - 6<em>x</em>) = 3 + log<sub>2</sub>(1 - <em>x</em>)</p>
      <div id="bdi_test">
        <h3><code>bdi</code> and <code>bdo</code> Test:</h3>
        <p>
        In the example below, usernames are shown along with the number of points in a contest.
        If the bdi element is not supported in the browser, the username of the Arabic user would confuse the text (the bidirectional algorithm would put the colon and the number "90" next to the word "User" rather than next to the word "points").
        </p>
        
        <ul>
         <li>User <bdi>hrefs</bdi>: 60 points</li>
         <li>User <bdi>jdoe</bdi>: 80 points</li>
         <li>User <bdi>إيان</bdi>: 90 points</li>
         <bdo dir="rtl">Swapped!</bdo>
         <bdo dir="ltr">This text will go left to right!</bdo>
         <bdo dir="rtl">With bdi: User <bdi>إيان</bdi>: 90 points</bdo>
         <bdo dir="rtl">Without bdi: User إيان: 90 points</bdo>
         <bdo dir="ltr">ltr w/ bdi: User <bdi>إيان</bdi>: 90 points</bdo>
         <bdo dir="ltr">ltr w/o bdi: User إيان: 90 points</bdo>
        </ul>
      </div>
            <div>
              <table>
              <caption>This is the table's caption</caption>
                <tr><th>Head 1<sup>*</sup></th><th>Head 2</th><th>Head 3</th></tr>
                <tr><td>Data 1</td><td>Long Data 2</td><td>Really, realllllly, long data 3</td></tr>
                <tr><td>Data 1</td><td>Long <b>Data</b> 2</td><td>Really, realllllly, long data 3</td></tr>
                <tr><td>Data 1</td><td>Long Data 2</td><td>Really, realllllly, long data 3</td></tr>
                <tr><td>Different 1</td><td>Different reallllllly long 2</td><td>Diff 3</td></tr>
                <tr><td colspan="2">This spans 2 columns</td><td>Normal td</td></tr>
                <tfoot>
                <tr><td>In foot 1</td><td>In foot 2</td><td>In foot long 2</td></tr>
                </tfoot>
              </table>
            </div>
            <div>Nested div</div>
            <div>
            <pre>
            jQuery("#monkey");
            </pre>
            <br />
            <p><q>This is a fancy quote</q></p>
            <br />
            <br />
            Second nested div<br />
            <figure>
            <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" />
            <figcaption>Available on GitHub</figcaption>
            </figure>
            </div>
            <div>Third nested div</div>
          </div>
          <h1>Second header</h1>
          <h1>Third header</h1>
          <div>Fourth div</div>
  """,
            //Optional parameters:
            padding: EdgeInsets.all(8.0),
            linkStyle: const TextStyle(
              color: Colors.redAccent,
              decorationColor: Colors.redAccent,
              decoration: TextDecoration.underline,
            ),
            onLinkTap: (url) {
              print("Opening $url...");
            },
            onImageTap: (src) {
              print(src);
            },
            //Must have useRichText set to false for this to work
            customRender: (node, children) {
              if (node is dom.Element) {
                switch (node.localName) {
                  case "custom_tag":
                    return Column(children: children);
                }
              }
              return null;
            },
            customTextAlign: (dom.Node node) {
              if (node is dom.Element) {
                switch (node.localName) {
                  case "p":
                    return TextAlign.justify;
                }
              }
              return null;
            },
            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;
            },
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_html: ^0.11.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_html/flutter_html.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
99
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
100
Learn more about scoring.

We analyzed this package on Dec 14, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.1+4
  • Flutter: 1.12.13+hotfix.4

Health suggestions

Format lib/rich_text_parser.dart.

Run flutter format to format lib/rich_text_parser.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.0 <3.0.0
flutter 0.0.0
html ^0.14.0 0.14.0+3
Transitive dependencies
charcode 1.1.2
collection 1.14.11 1.14.12
csslib 0.16.1
meta 1.1.8
path 1.6.4
sky_engine 0.0.99
source_span 1.5.5
term_glyph 1.1.0
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test