flutter_html 0.8.2

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 97

flutter_html

pub package

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

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, 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

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, sub, summary, sup, 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, font, 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.

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'),
  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(...);
      }
    }
  },
)

[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>
      <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</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://assets-cdn.github.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),
            onLinkTap: (url) {
              print("Opening $url...");
            },
            customRender: (node, children) {
              if (node is dom.Element) {
                switch (node.localName) {
                  case "custom_tag":
                    return Column(children: children);
                }
              }
            },
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_html: ^0.8.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages 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';
  
Version Uploaded Documentation Archive
0.8.2 Nov 2, 2018 Go to the documentation of flutter_html 0.8.2 Download flutter_html 0.8.2 archive
0.8.1 Oct 19, 2018 Go to the documentation of flutter_html 0.8.1 Download flutter_html 0.8.1 archive
0.8.0 Oct 19, 2018 Go to the documentation of flutter_html 0.8.0 Download flutter_html 0.8.0 archive
0.7.1 Sep 12, 2018 Go to the documentation of flutter_html 0.7.1 Download flutter_html 0.7.1 archive
0.7.0 Sep 11, 2018 Go to the documentation of flutter_html 0.7.0 Download flutter_html 0.7.0 archive
0.6.2 Sep 6, 2018 Go to the documentation of flutter_html 0.6.2 Download flutter_html 0.6.2 archive
0.6.1 Sep 5, 2018 Go to the documentation of flutter_html 0.6.1 Download flutter_html 0.6.1 archive
0.6.0 Sep 5, 2018 Go to the documentation of flutter_html 0.6.0 Download flutter_html 0.6.0 archive
0.5.6 Sep 5, 2018 Go to the documentation of flutter_html 0.5.6 Download flutter_html 0.5.6 archive
0.5.5 Sep 4, 2018 Go to the documentation of flutter_html 0.5.5 Download flutter_html 0.5.5 archive

All 22 versions...

Popularity:
Describes how popular the package is relative to other packages. [more]
93
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]
97
Learn more about scoring.

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

  • Dart: 2.0.0
  • pana: 0.12.6
  • Flutter: 0.11.3

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.0 <3.0.0
flutter 0.0.0
html ^0.13.3 0.13.3+3
Transitive dependencies
args 1.5.1
charcode 1.1.2
collection 1.14.11
csslib 0.14.6
logging 0.11.3+2
meta 1.1.6
path 1.6.2
sky_engine 0.0.99
source_span 1.4.1
typed_data 1.1.6
utf 0.9.0+5
vector_math 2.0.8
Dev dependencies
flutter_test