HTML5

A Flutter widget for rendering HTML and CSS as Flutter widgets.

Screenshot 1Screenshot 2Screenshot 3

Installing:

Add the following to your pubspec.yaml file:

    ...
    dependencies:
      rhtml5: ^0.0.1
      ...

Currently Supported HTML Tags:

aabbracronymaddressarticleasideaudiobbdibdobigblockquotebodybrcaptioncitecodedatadddeldetailsdfndivdldtemfigcaptionfigurefooterfonth1h2h3h4h5h6headerhriiframeimginskbdlimainmarknavnoscriptolppreqrprtrubyssampsectionsmallspanstrikestrongsubsupsummarysvgtabletbodytdtemplatetfootththeadtimetrttuulvarvideomath:mrowmsupmsubmovermundermsubsupmoverundermfracmlongdivmsqrtmrootmimnmo

Currently Supported CSS Attributes:

background-colorcolordirectiondisplayfont-familyfont-feature-settingsfont-sizefont-stylefont-weightheightletter-spacingline-heightlist-style-typelist-style-positionpaddingmargintext-aligntext-decorationtext-decoration-colortext-decoration-styletext-decoration-thicknesstext-shadowvertical-alignwhite-spacewidthword-spacing

Currently Supported Inline CSS Attributes:

background-colorborder (including specific directions)colordirectiondisplayfont-familyfont-feature-settingsfont-sizefont-stylefont-weightline-heightlist-style-typelist-style-positionpadding (including specific directions)margin (including specific directions)text-aligntext-decorationtext-decoration-colortext-decoration-styletext-shadow

Don’t see a tag or attribute you need? File a feature request or contribute to the project!

Usage

See wiki for more details

Widget html = Html(
    data: """
       <h1>Table support:</h1>
       <table>
       <colgroup>
       <col width="50%" />
       <col span="2" width="25%" />
       </colgroup>
       <thead>
       <tr><th>One</th><th>Two</th><th>Three</th></tr>
       </thead>
       <tbody>
       <tr>
       <td rowspan='2'>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan</td><td>Data</td><td>Data</td>
       </tr>
       <tr>
       <td colspan="2"><img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></td>
       </tr>
       </tbody>
       <tfoot>
       <tr><td>fData</td><td>fData</td><td>fData</td></tr>
       </tfoot>
       </table>""",
    style: {
      // tables will have the below background color
      "table": Style(
        backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee),
      ),
      // some other granular customizations are also possible
      "tr": Style(
        border: Border(bottom: BorderSide(color: Colors.grey)),
      ),
      "th": Style(
        padding: EdgeInsets.all(6),
        backgroundColor: Colors.grey,
      ),
      "td": Style(
        padding: EdgeInsets.all(6),
        alignment: Alignment.topLeft,
      ),
      // text that renders h1 elements will be red
      "h1": Style(color: Colors.red),
    }
);