@@ -21,7 +21,7 @@ class MyApp extends StatelessWidget {
21
21
}
22
22
23
23
class MyHomePage extends StatefulWidget {
24
- const MyHomePage ({Key ? key, required this .title}) : super (key : key );
24
+ const MyHomePage ({super . key, required this .title});
25
25
26
26
final String title;
27
27
@@ -37,20 +37,20 @@ const htmlData = r"""
37
37
<h4>Header 4</h4>
38
38
<h5>Header 5</h5>
39
39
<h6>Header 6</h6>
40
-
40
+
41
41
<h2>Inline Styles:</h2>
42
42
<p>The should be <span style='color: blue;'>BLUE style='color: blue;'</span></p>
43
43
<p>The should be <span style='color: red;'>RED style='color: red;'</span></p>
44
44
<p>The should be <span style='color: rgba(0, 0, 0, 0.10);'>BLACK with 10% alpha style='color: rgba(0, 0, 0, 0.10);</span></p>
45
45
<p>The should be <span style='color: rgb(0, 97, 0);'>GREEN style='color: rgb(0, 97, 0);</span></p>
46
46
<p>The should be <span style='background-color: red; color: rgb(0, 97, 0);'>GREEN style='color: rgb(0, 97, 0);</span></p>
47
-
47
+
48
48
<h2>Text Alignment</h2>
49
49
<p style="text-align: center;"><span style="color: rgba(0, 0, 0, 0.95);">Center Aligned Text</span></p>
50
50
<p style="text-align: right;"><span style="color: rgba(0, 0, 0, 0.95);">Right Aligned Text</span></p>
51
51
<p style="text-align: justify;"><span style="color: rgba(0, 0, 0, 0.95);">Justified Text</span></p>
52
52
<p style="text-align: center;"><span style="color: rgba(0, 0, 0, 0.95);">Center Aligned Text</span></p>
53
-
53
+
54
54
<h2>Margins</h2>
55
55
<div style="width: 350px; height: 20px; text-align: center; background-color: #ff9999;">Default Div (width 350px height 20px)</div>
56
56
<div style="width: 350px; height: 20px; text-align: center; background-color: #ffff99; margin-left: 3em;">margin-left: 3em</div>
@@ -59,17 +59,17 @@ const htmlData = r"""
59
59
<div style="width: 350px; height: 20px; text-align: center; background-color: #9999ff; margin-left: auto;">margin-left: auto</div>
60
60
<div style="width: 350px; height: 20px; text-align: center; background-color: #99ffff; margin-right: auto;">margin-right: auto</div>
61
61
<div style="width: 350px; height: 20px; text-align: center; background-color: #999999; margin-left: auto; margin-right: 3em;">margin-left: auto; margin-right: 3em</div>
62
-
62
+
63
63
<h4>Margin Auto on Image</h4>
64
64
<p>display:inline-block; margin: auto; (should not center):</p>
65
- <img alt='' style="margin: auto;" width="100" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png ">
65
+ <img alt='' style="margin: auto;" width="100" src="https://picsum.photos/200/300.jpg ">
66
66
<p>display:block margin: auto; (should center):</p>
67
- <img alt='' style="display: block; margin: auto;" width="100" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png ">
68
-
67
+ <img alt='' style="display: block; margin: auto;" width="100" src="https://picsum.photos/400/250.jpg ">
68
+
69
69
<h2>Support for <code>sub</code>/<code>sup</code></h2>
70
70
Solve for <var>x<sub>n</sub></var>: log<sub>2</sub>(<var>x</var><sup>2</sup>+<var>n</var>) = 9<sup>3</sup>
71
71
<p>One of the most <span>common</span> equations in all of physics is <br /><var>E</var>=<var>m</var><var>c</var><sup>2</sup>.</p>
72
-
72
+
73
73
<h2>Ruby Support:</h2>
74
74
<p>
75
75
<ruby>
@@ -78,11 +78,11 @@ const htmlData = r"""
78
78
</ruby>
79
79
is Japanese Kanji.
80
80
</p>
81
-
81
+
82
82
<h2>Support for maxLines:</h2>
83
83
<h5>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vestibulum sapien feugiat lorem tempor, id porta orci elementum. Fusce sed justo id arcu egestas congue. Fusce tincidunt lacus ipsum, in imperdiet felis ultricies eu. In ullamcorper risus felis, ac maximus dui bibendum vel. Integer ligula tortor, facilisis eu mauris ut, ultrices hendrerit ex. Donec scelerisque massa consequat, eleifend mauris eu, mollis dui. Donec placerat augue tortor, et tincidunt quam tempus non. Quisque sagittis enim nisi, eu condimentum lacus egestas ac. Nam facilisis luctus ipsum, at aliquam urna fermentum a. Quisque tortor dui, faucibus in ante eget, pellentesque mattis nibh. In augue dolor, euismod vitae eleifend nec, tempus vel urna. Donec vitae augue accumsan ligula fringilla ultrices et vel ex.</h5>
84
-
85
-
84
+
85
+
86
86
<h2>Table support (With custom styling!):</h2>
87
87
<table>
88
88
<colgroup>
@@ -104,7 +104,7 @@ const htmlData = r"""
104
104
<tr><td>fData</td><td>fData</td><td>fData</td></tr>
105
105
</tfoot>
106
106
</table>
107
-
107
+
108
108
<h2>List support:</h2>
109
109
<ol>
110
110
<li>This</li>
@@ -131,14 +131,14 @@ const htmlData = r"""
131
131
<li><h2>Header 2</h2></li>
132
132
<h2><li>Header 2</li></h2>
133
133
</ol>
134
-
134
+
135
135
<h2>Link support:</h2>
136
136
<p>
137
137
Linking to <a href='https://github.com'>websites</a> has never been easier.
138
138
</p>
139
-
139
+
140
140
<h2>Image support:</h2>
141
-
141
+
142
142
<table class="second-table">
143
143
<tr><td>Network png</td><td><img width="200" alt='xkcd' src='https://imgs.xkcd.com/comics/commemorative_plaque.png' /></td></tr>
144
144
<tr><td>Local asset png</td><td><img src='asset:assets/html5.png' width='100' /></td></tr>
@@ -151,23 +151,23 @@ const htmlData = r"""
151
151
<tr><td>Custom image render</td><td><img src='https://flutter.dev/images/flutter-mono-81x100.png' /></td></tr>
152
152
<tr><td>Broken network image</td><td><img alt='Broken network image alt text' src='https://www.example.com/image.png' /></td></tr>
153
153
</table>
154
-
154
+
155
155
<h2 id='middle'>SVG support:</h2>
156
156
<svg id='svg1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
157
157
<circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/>
158
158
<circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/>
159
159
<circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/>
160
160
</svg>
161
-
161
+
162
162
<h2>Custom Element Support:</h2>
163
163
Inline: <bird></bird> becomes: <bird></bird>.
164
164
<br />
165
-
165
+
166
166
Block: <flutter></flutter> becomes:
167
167
<flutter></flutter>
168
168
and <flutter horizontal></flutter> becomes:
169
169
<flutter horizontal></flutter>
170
-
170
+
171
171
<h2>MathML Support:</h2>
172
172
<math>
173
173
<mrow>
@@ -261,7 +261,7 @@ const htmlData = r"""
261
261
<mo>=</mo>
262
262
<mn>1</mn>
263
263
</math>
264
-
264
+
265
265
<h2>Tex Support with the custom tex tag:</h2>
266
266
<tex>i\hbar\frac{\partial}{\partial t}\Psi(\vec x,t) = -\frac{\hbar}{2m}\nabla^2\Psi(\vec x,t)+ V(\vec x)\Psi(\vec x,t)</tex>
267
267
<p id='bottom'><a href='#top'>Scroll to top</a></p>
0 commit comments