1
1
import 'package:flutter/material.dart' ;
2
2
import 'package:flutter_html/flutter_html.dart' ;
3
+ import 'package:flutter_html/html_parser.dart' ;
3
4
import 'package:flutter_html/style.dart' ;
4
5
5
6
void main () => runApp (new MyApp ());
@@ -13,7 +14,7 @@ class MyApp extends StatelessWidget {
13
14
theme: new ThemeData (
14
15
primarySwatch: Colors .blue,
15
16
),
16
- home: new MyHomePage (title: 'Flutter Demo Home Page ' ),
17
+ home: new MyHomePage (title: 'flutter_html Example ' ),
17
18
);
18
19
}
19
20
}
@@ -34,110 +35,80 @@ class _MyHomePageState extends State<MyHomePage> {
34
35
appBar: new AppBar (
35
36
title: new Text (widget.title),
36
37
),
37
- body: new Center (
38
- child: SingleChildScrollView (
39
- child: Html (
40
- data: """
41
- <div>
42
- <div id="header_set">
38
+ body: SingleChildScrollView (
39
+ child: Html (
40
+ data: """
43
41
<h1>Header 1</h1>
44
42
<h2>Header 2</h2>
45
43
<h3>Header 3</h3>
46
44
<h4>Header 4</h4>
47
45
<h5>Header 5</h5>
48
46
<h6>Header 6</h6>
49
- <hr />
50
- Below hr
51
- <b>Bold</b>
52
- </div>
53
- <h1>Demo Page</h1>
54
- <p>This is a <u>fantastic</u> nonexistent product that you should really really really consider buying!</p>
55
- <a href="https://github.com">https://github.com</a><br />
47
+ <img src='https://example.com/image.jpg' alt='Alt Text' />
48
+ <table>
49
+ <tr><th>One</th><th>Two</th><th>Three</th></tr>
50
+ <tr><td>Data</td><td>Data</td><td>Data</td></tr>
51
+ <tr><td>Data</td><td>Data</td><td>Data</td></tr>
52
+ <tr><td>Data</td><td>Data</td><td>Data</td></tr>
53
+ <tfoot>
54
+ <tr><td>Data</td><td>Data</td><td>Data</td></tr>
55
+ </tfoot>
56
+ </table>
57
+ <flutter></flutter>
58
+ <svg id='svg1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
59
+ <circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/>
60
+ <circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/>
61
+ <circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/>
62
+ </svg>
56
63
<br />
57
- <h2>Pricing</h2>
58
- <p>Lorem ipsum <b>dolor</b> sit amet.</p>
59
- <center>
60
- This is some center text... <abbr>ABBR</abbr> and <acronym>ACRONYM</acronym>
61
- </center>
62
- <h2>The Team</h2>
63
- <p>There isn't <i>really</i> a team...</p>
64
- <h2>Installation</h2>
65
- <p>You <u>cannot</u> install a nonexistent product!</p>
66
- <h2>Don't ask me to find <em>x</em> in</h2>
67
- <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>
68
- <div id="bdi_test">
69
- <h3><code>bdi</code> and <code>bdo</code> Test:</h3>
70
- <p>
71
- In the example below, usernames are shown along with the number of points in a contest.
72
- 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").
73
- </p>
74
-
64
+ <a href='https://flutter.dev'>Flutter Website</a><br />
65
+ <audio controls>
66
+ <source src='https://www.w3schools.com/tags/horse.mp3'>
67
+ </audio>
68
+ <ol>
69
+ <li>This</li>
70
+ <li>is</li>
71
+ <li>an</li>
72
+ <li>
73
+ ordered
75
74
<ul>
76
- <li>User <bdi>hrefs</bdi>: 60 points</li>
77
- <li>User <bdi>jdoe</bdi>: 80 points</li>
78
- <li>User <bdi>إيان</bdi>: 90 points</li>
79
- <bdo dir="rtl">Swapped!</bdo>
80
- <bdo dir="ltr">This text will go left to right!</bdo>
81
- <bdo dir="rtl">With bdi: User <bdi>إيان</bdi>: 90 points</bdo>
82
- <bdo dir="rtl">Without bdi: User إيان: 90 points</bdo>
83
- <bdo dir="ltr">ltr w/ bdi: User <bdi>إيان</bdi>: 90 points</bdo>
84
- <bdo dir="ltr">ltr w/o bdi: User إيان: 90 points</bdo>
75
+ <li>With</li>
76
+ <li>a</li>
77
+ <li>nested</li>
78
+ <li>unordered</li>
79
+ <li>list</li>
85
80
</ul>
86
- </div>
87
- <div>
88
- <table>
89
- <caption>This is the table's caption</caption>
90
- <tr><th>Head 1<sup>*</sup></th><th>Head 2</th><th>Head 3</th></tr>
91
- <tr><td>Data 1</td><td>Long Data 2</td><td>Really, realllllly, long data 3</td></tr>
92
- <tr><td>Data 1</td><td>Long <b>Data</b> 2</td><td>Really, realllllly, long data 3</td></tr>
93
- <tr><td>Data 1</td><td>Long Data 2</td><td>Really, realllllly, long data 3</td></tr>
94
- <tr><td>Different 1</td><td>Different reallllllly long 2</td><td>Diff 3</td></tr>
95
- <tr><td colspan="2">This spans 2 columns</td><td>Normal td</td></tr>
96
- <tfoot>
97
- <tr><td>In foot 1</td><td>In foot 2</td><td>In foot long 2</td></tr>
98
- </tfoot>
99
- </table>
100
- </div>
101
- <div>Nested div</div>
102
- <div>
103
- <pre>
104
- jQuery("#monkey");
105
- </pre>
106
- <br />
107
- <p><q>This is a fancy quote</q></p>
108
- <br />
109
- <br />
110
- Second nested div<br />
111
- <figure>
112
- <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" />
113
- <figcaption>Available on GitHub</figcaption>
114
- </figure>
115
- </div>
116
- <div>Third nested div</div>
117
- </div>
118
- <h1>Second header</h1>
119
- <h1>Third header</h1>
120
- <div>Fourth div</div>
81
+ </li>
82
+ <li>list!</li>
83
+ </ol>
84
+ <hr />
85
+ <video controls>
86
+ <source src='https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4'>
87
+ </video>
88
+ <iframe src='https://matthewwhitaker.me'></iframe>
121
89
""" ,
122
- //Optional parameters:
123
- style: {
124
- "ul" : Style (
125
- fontFamily: "monospace" ,
126
- fontSize: 24 ,
127
- margin: EdgeInsets .zero,
128
- // block: Block(
129
- // border: Border.all(width: 2),
130
- // ),
131
- backgroundColor: Colors .blue,
132
- ),
133
- },
134
- onLinkTap: (url) {
135
- print ("Opening $url ..." );
136
- },
137
- onImageTap: (src) {
138
- print (src);
139
- },
140
- ),
90
+ //Optional parameters:
91
+ style: {
92
+ "html" : Style .fromTextStyle (TextStyle (fontFamily: 'monospace' )),
93
+ "a" : Style (
94
+ color: Colors .red,
95
+ ),
96
+ },
97
+ customRender: {
98
+ "flutter" : (RenderContext context, Widget child, attributes) {
99
+ return FlutterLogo (
100
+ style: (attributes['horizontal' ] != null )? FlutterLogoStyle .horizontal: FlutterLogoStyle .markOnly,
101
+ textColor: context.style.color,
102
+ size: context.style.fontSize * 5 ,
103
+ );
104
+ }
105
+ },
106
+ onLinkTap: (url) {
107
+ print ("Opening $url ..." );
108
+ },
109
+ onImageTap: (src) {
110
+ print (src);
111
+ },
141
112
),
142
113
),
143
114
);
0 commit comments