A Flutter widget for rendering HTML5 and CSS3 as Flutter widgets

Flutterappworld

2 years ago

HTML5

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

Installing:

Add the following to your pubspec.yaml file:

    ...
    dependencies:
      html5_api: ^0.0.1

Currently Supported HTML Tags:


`a`	`abbr`	`acronym`	`address`	`article`	`aside`	`audio`	`b`	`bdi`	`bdo`	`big`
`blockquote`	`body`	`br`	`caption`	`cite`	`code`	`data`	`dd`	`del`	`details`	`dfn`
`div`	`dl`	`dt`	`em`	`figcaption`	`figure`	`footer`	`font`	`h1`	`h2`	`h3`
`h4`	`h5`	`h6`	`header`	`hr`	`i`	`iframe`	`img`	`ins`	`kbd`	`li`
`main`	`mark`	`nav`	`noscript`	`ol`	`p`	`pre`	`q`	`rp`	`rt`	`ruby`
`s`	`samp`	`section`	`small`	`span`	`strike`	`strong`	`sub`	`sup`	`summary`	`svg`
`table`	`tbody`	`td`	`template`	`tfoot`	`th`	`thead`	`time`	`tr`	`tt`	`u`
`ul`	`var`	`video`	`math`:	`mrow`	`msup`	`msub`	`mover`	`munder`	`msubsup`	`moverunder`
`mfrac`	`mlongdiv`	`msqrt`	`mroot`	`mi`	`mn`	`mo`

Currently Supported CSS Attributes:


`background-color`	`color`	`direction`	`display`	`font-family`	`font-feature-settings`	`font-size`
`font-style`	`font-weight`	`height`	`letter-spacing`	`line-height`	`list-style-type`	`list-style-position`
`padding`	`margin`	`text-align`	`text-decoration`	`text-decoration-color`	`text-decoration-style`	`text-decoration-thickness`
`text-shadow`	`vertical-align`	`white-space`	`width`	`word-spacing`

Currently Supported Inline CSS Attributes:


`background-color`	`border` (including specific directions)	`color`	`direction`	`display`	`font-family`	`font-feature-settings`
`font-size`	`font-style`	`font-weight`	`line-height`	`list-style-type`	`list-style-position`	`padding` (including specific directions)
`margin` (including specific directions)	`text-align`	`text-decoration`	`text-decoration-color`	`text-decoration-style`	`text-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

import 'html5/html5.dart';

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