|
1 | 1 | # flutter_html |
2 | 2 | [](https://pub.dev/packages/flutter_html) |
| 3 | +[](https://codecov.io/gh/Sub6Resources/flutter_html) |
3 | 4 | [](https://circleci.com/gh/Sub6Resources/flutter_html) |
| 5 | +[](https://github.com/Sub6Resources/flutter_html/blob/master/LICENSE) |
4 | 6 |
|
5 | | -> **Note: 1.0.0-pre.1 has been released! See the [Migration Guide](https://github.com/Sub6Resources/flutter_html/wiki/1.0.0-Migration-Guide) if you'd like to take advantage of all the new features of 1.0.0! Also, check out the [Prerelease Changelog](https://github.com/Sub6Resources/flutter_html/blob/new-parser/PRE_CHANGELOG.md).** Version 1.0.0 is currently on the `new-parser` branch. This README will be updated when 1.0.0 is merged into the master branch. |
6 | | -
|
7 | | -A Flutter widget for rendering static html tags as Flutter widgets. (Will render over 70 different html tags!) |
| 7 | +A Flutter widget for rendering html and css as Flutter widgets. |
8 | 8 |
|
9 | 9 | <img alt="A Screenshot of flutter_html" src=".github/flutter_html_screenshot.png" width="300"/> |
| 10 | +<img alt="Another Screenshot of flutter_html" src=".github/flutter_html_screenshot2.png" width="300"/> |
| 11 | +<img alt="Yet another Screenshot of flutter_html" src=".github/flutter_html_screenshot3.png" width="300"/> |
10 | 12 |
|
11 | 13 | ## Installing: |
12 | 14 |
|
13 | 15 | Add the following to your `pubspec.yaml` file: |
14 | 16 |
|
15 | 17 | dependencies: |
16 | | - flutter_html: ^0.11.1 |
| 18 | + flutter_html: ^1.0.0-pre.1 |
17 | 19 |
|
18 | 20 | ## Currently Supported HTML Tags: |
19 | 21 | `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` |
20 | 22 |
|
21 | | -## Roadmap |
22 | | -[View the development roadmap in the wiki](https://github.com/Sub6Resources/flutter_html/wiki/Roadmap) |
23 | | - |
24 | | -### Partially supported elements: |
25 | | -> These are common elements that aren't yet fully supported, but won't be ignored and will still render somewhat correctly. |
26 | | -
|
27 | | -`center`, `font` |
| 23 | +## Currently Supported CSS Attributes: |
| 24 | +> Coming soon! |
28 | 25 | |
29 | | -### List of _planned_ supported elements: |
30 | | -> These are elements that are planned, but present a specific challenge that makes them somewhat difficult to implement. |
31 | | -
|
32 | | -`audio`, `details`, `source`, `summary`, `svg`, `track`, `video`, `wbr` |
33 | | - |
34 | | -### List of elements that I don't plan on implementing: |
| 26 | +### Elements with planned support: |
35 | 27 |
|
36 | | -> Feel free to open an issue if you have a good reason and feel like you can convince me to implement |
37 | | - them. A _well written_ and _complete_ pull request implementing one of these is always welcome, |
38 | | - though I cannot promise I will merge them. |
39 | | - |
40 | | -> Note: These unsupported tags will just be ignored. |
41 | | -
|
42 | | -`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` |
43 | | - |
| 28 | +See the [development roadmap](https://github.com/Sub6Resources/flutter_html/wiki/Roadmap) for the list of elements and css attributes I plan on supporting. |
44 | 29 |
|
45 | 30 | ## Why this package? |
46 | 31 |
|
47 | | -This package is designed with simplicity in mind. Flutter currently does not support rendering of web content |
48 | | -into the widget tree. This package is designed to be a reasonable alternative for rendering static web content |
49 | | -until official support is added. |
50 | | - |
51 | | -### Update: |
52 | | -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. |
53 | | - |
54 | | -Check out the official Flutter WebView package here: https://pub.dartlang.org/packages/webview_flutter |
55 | | - |
| 32 | +This package is designed with simplicity in mind. Originally created to allow basic rendering of HTML content into the Flutter widget tree, |
| 33 | +this project has expanded to include support for basic styling as well!. |
56 | 34 |
|
57 | 35 | ## Example Usage: |
58 | | - |
59 | | - Html( |
| 36 | +(For a much more extensive example, look at example/main.dart). |
| 37 | +```dart |
| 38 | + Widget html = Html( |
60 | 39 | data: """ |
61 | | - <!--For a much more extensive example, look at example/main.dart--> |
62 | 40 | <div> |
63 | 41 | <h1>Demo Page</h1> |
64 | | - <p>This is a fantastic nonexistent product that you should buy!</p> |
65 | | - <h2>Pricing</h2> |
66 | | - <p>Lorem ipsum <b>dolor</b> sit amet.</p> |
67 | | - <h2>The Team</h2> |
68 | | - <p>There isn't <i>really</i> a team...</p> |
69 | | - <h2>Installation</h2> |
70 | | - <p>You <u>cannot</u> install a nonexistent product!</p> |
| 42 | + <p>This is a fantastic product that you should buy!</p> |
| 43 | + <h3>Features</h3> |
| 44 | + <ul> |
| 45 | + <li>It actually works</li> |
| 46 | + <li>It exists</li> |
| 47 | + <li>It doesn't cost much!</li> |
| 48 | + </ul> |
71 | 49 | <!--You can pretty much put any html in here!--> |
72 | 50 | </div> |
73 | 51 | """, |
74 | 52 | //Optional parameters: |
75 | | - padding: EdgeInsets.all(8.0), |
76 | 53 | backgroundColor: Colors.white70, |
77 | | - defaultTextStyle: TextStyle(fontFamily: 'serif'), |
78 | | - linkStyle: const TextStyle( |
79 | | - color: Colors.redAccent, |
80 | | - ), |
81 | 54 | onLinkTap: (url) { |
82 | 55 | // open url in a webview |
83 | 56 | }, |
| 57 | + style: { |
| 58 | + "div": Style( |
| 59 | + block: Block( |
| 60 | + margin: EdgeInsets.all(16), |
| 61 | + border: Border.all(width: 6), |
| 62 | + backgroundColor: Colors.grey, |
| 63 | + ), |
| 64 | + textStyle: TextStyle( |
| 65 | + color: Colors.red, |
| 66 | + ), |
| 67 | + ), |
| 68 | + }, |
84 | 69 | onImageTap: (src) { |
85 | 70 | // Display the image in large form. |
86 | 71 | }, |
87 | | - //Must have useRichText set to false for this to work. |
88 | | - customRender: (node, children) { |
89 | | - if(node is dom.Element) { |
90 | | - switch(node.localName) { |
91 | | - case "video": return Chewie(...); |
92 | | - case "custom_tag": return CustomWidget(...); |
93 | | - } |
94 | | - } |
95 | | - }, |
96 | | - customTextAlign: (dom.Node node) { |
97 | | - if (node is dom.Element) { |
98 | | - switch (node.localName) { |
99 | | - case "p": |
100 | | - return TextAlign.justify; |
101 | | - } |
102 | | - } |
103 | | - }, |
104 | | - customTextStyle: (dom.Node node, TextStyle baseStyle) { |
105 | | - if (node is dom.Element) { |
106 | | - switch (node.localName) { |
107 | | - case "p": |
108 | | - return baseStyle.merge(TextStyle(height: 2, fontSize: 20)); |
109 | | - } |
110 | | - } |
111 | | - return baseStyle; |
112 | | - }, |
113 | | - ) |
114 | | - |
115 | | -## `useRichText` parameter |
116 | | - |
117 | | -This package has a known issue where text does not wrap correctly. Setting `useRichText` to true fixes the issue |
118 | | -by using an alternate parser. The alternate parser, however, does not support the `customRender` callback, and several elements |
119 | | -supported by the default parser are not supported by the alternate parser (see [#61](https://github.com/Sub6Resources/flutter_html/issues/61) for a list). |
| 72 | + ); |
0 commit comments