Skip to content

Commit 46a4230

Browse files
hey24sheephey24sheep
committed
- Readme updated for package
- Detailed examples added to example readme
1 parent e4821d7 commit 46a4230

File tree

2 files changed

+214
-11
lines changed

2 files changed

+214
-11
lines changed

‎README.md

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@
66

77
A Flutter widget for rendering html and css as Flutter widgets.
88

9+
<p>
910
<img alt="A Screenshot of flutter_html" src=".github/flutter_html_screenshot.png" width="300"/>
1011
<img alt="Another Screenshot of flutter_html" src=".github/flutter_html_screenshot2.png" width="300"/>
1112
<img alt="Yet another Screenshot of flutter_html" src=".github/flutter_html_screenshot3.png" width="300"/>
13+
</p>
1214

1315
## Installing:
1416

@@ -33,7 +35,7 @@ This package is designed with simplicity in mind. Originally created to allow ba
3335
this project has expanded to include support for basic styling as well!.
3436

3537
## Example Usage:
36-
(For a much more extensive example, look at example/main.dart).
38+
(For a much more extensive example, look at [example](https://github.com/hey24sheep/flutter_html/tree/master/example).
3739
```dart
3840
Widget html = Html(
3941
data: """
@@ -70,3 +72,12 @@ this project has expanded to include support for basic styling as well!.
7072
// Display the image in large form.
7173
},
7274
);
75+
```
76+
77+
## Migration Guides
78+
- For Version 1.0 [Guide](https://github.com/Sub6Resources/flutter_html/wiki/1.0.0-Migration-Guide)
79+
80+
## Contribution Guide
81+
> Coming soon!
82+
>
83+
> Meanwhile, PRs are always welcome

‎example/README.md

Lines changed: 202 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,208 @@
1-
# example
1+
# Example
22

3-
A new Flutter project.
3+
Detailed Example for flutter_html package
44

5-
## Getting Started
5+
# Basic Example
6+
```dart
7+
Widget html = Html(
8+
data: """
9+
<div>
10+
<h1>Demo Page</h1>
11+
<p>This is a fantastic product that you should buy!</p>
12+
<h3>Features</h3>
13+
<ul>
14+
<li>It actually works</li>
15+
<li>It exists</li>
16+
<li>It doesn't cost much!</li>
17+
</ul>
18+
<!--You can pretty much put any html in here!-->
19+
</div>
20+
""",
21+
//Optional parameters:
22+
backgroundColor: Colors.white70,
23+
onLinkTap: (url) {
24+
// open url in a webview
25+
},
26+
style: {
27+
"div": Style(
28+
block: Block(
29+
margin: EdgeInsets.all(16),
30+
border: Border.all(width: 6),
31+
backgroundColor: Colors.grey,
32+
),
33+
textStyle: TextStyle(
34+
color: Colors.red,
35+
),
36+
),
37+
},
38+
onImageTap: (src) {
39+
// Display the image in large form.
40+
},
41+
);
42+
```
643

7-
This project is a starting point for a Flutter application.
44+
# Detailed Example
845

9-
A few resources to get you started if this is your first Flutter project:
46+
## Example HTML data string/body
1047

11-
- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
12-
- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
48+
```html
49+
const htmlData = """
50+
<h1>Header 1</h1>
51+
<h2>Header 2</h2>
52+
<h3>Header 3</h3>
53+
<h4>Header 4</h4>
54+
<h5>Header 5</h5>
55+
<h6>Header 6</h6>
56+
<h3>Ruby Support:</h3>
57+
<p>
58+
<ruby>
59+
漢<rt>かん</rt>
60+
字<rt>じ</rt>
61+
</ruby>
62+
&nbsp;is Japanese Kanji.
63+
</p>
64+
<h3>Support for <code>sub</code>/<code>sup</code></h3>
65+
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>
66+
<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>
67+
<h3>Table support (with custom styling!):</h3>
68+
<p>
69+
<q>Famous quote...</q>
70+
</p>
71+
<table>
72+
<colgroup>
73+
<col width="50%" />
74+
<col width="25%" />
75+
<col width="25%" />
76+
</colgroup>
77+
<thead>
78+
<tr><th>One</th><th>Two</th><th>Three</th></tr>
79+
</thead>
80+
<tbody>
81+
<tr>
82+
<td>Data</td><td>Data</td><td>Data</td>
83+
</tr>
84+
<tr>
85+
<td>Data</td><td>Data</td><td>Data</td>
86+
</tr>
87+
</tbody>
88+
<tfoot>
89+
<tr><td>fData</td><td>fData</td><td>fData</td></tr>
90+
</tfoot>
91+
</table>
92+
<h3>Custom Element Support:</h3>
93+
<flutter></flutter>
94+
<flutter horizontal></flutter>
95+
<h3>SVG support:</h3>
96+
<svg id='svg1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
97+
<circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/>
98+
<circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/>
99+
<circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/>
100+
</svg>
101+
<h3>List support:</h3>
102+
<ol>
103+
<li>This</li>
104+
<li><p>is</p></li>
105+
<li>an</li>
106+
<li>
107+
ordered
108+
<ul>
109+
<li>With<br /><br />...</li>
110+
<li>a</li>
111+
<li>nested</li>
112+
<li>unordered
113+
<ol>
114+
<li>With a nested</li>
115+
<li>ordered list.</li>
116+
</ol>
117+
</li>
118+
<li>list</li>
119+
</ul>
120+
</li>
121+
<li>list! Lorem ipsum dolor sit amet.</li>
122+
<li><h2>Header 2</h2></li>
123+
<h2><li>Header 2</li></h2>
124+
</ol>
125+
<h3>Link support:</h3>
126+
<p>
127+
Linking to <a href='https://github.com'>websites</a> has never been easier.
128+
</p>
129+
<h3>Image support:</h3>
130+
<p>
131+
<img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' />
132+
<a href='https://google.com'><img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></a>
133+
<img alt='Alt Text of an intentionally broken image' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30d' />
134+
</p>
135+
<!--
136+
<h3>Video support:</h3>
137+
<video controls>
138+
<source src="https://www.w3schools.com/html/mov_bbb.mp4" />
139+
</video>
140+
<h3>Audio support:</h3>
141+
<audio controls>
142+
<source src="https://www.w3schools.com/html/horse.mp3" />
143+
</audio>
144+
<h3>IFrame support:</h3>
145+
<iframe src="https://google.com"></iframe>
146+
-->
147+
""";
148+
```
13149

14-
For help getting started with Flutter, view our
15-
[online documentation](https://flutter.dev/docs), which offers tutorials,
16-
samples, guidance on mobile development, and a full API reference.
150+
151+
## How to use
152+
```dart
153+
return new Scaffold(
154+
appBar: AppBar(
155+
title: Text('flutter_html Example'),
156+
centerTitle: true,
157+
),
158+
body: SingleChildScrollView(
159+
child: Html(
160+
data: htmlData,
161+
//Optional parameters:
162+
style: {
163+
"html": Style(
164+
backgroundColor: Colors.black12,
165+
// color: Colors.white,
166+
),
167+
// "h1": Style(
168+
// textAlign: TextAlign.center,
169+
// ),
170+
"table": Style(
171+
backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee),
172+
),
173+
"tr": Style(
174+
border: Border(bottom: BorderSide(color: Colors.grey)),
175+
),
176+
"th": Style(
177+
padding: EdgeInsets.all(6),
178+
backgroundColor: Colors.grey,
179+
),
180+
"td": Style(
181+
padding: EdgeInsets.all(6),
182+
),
183+
"var": Style(fontFamily: 'serif'),
184+
},
185+
customRender: {
186+
"flutter": (RenderContext context, Widget child, attributes, _) {
187+
return FlutterLogo(
188+
style: (attributes['horizontal'] != null)
189+
? FlutterLogoStyle.horizontal
190+
: FlutterLogoStyle.markOnly,
191+
textColor: context.style.color,
192+
size: context.style.fontSize.size * 5,
193+
);
194+
},
195+
},
196+
onLinkTap: (url) {
197+
print("Opening $url...");
198+
},
199+
onImageTap: (src) {
200+
print(src);
201+
},
202+
onImageError: (exception, stackTrace) {
203+
print(exception);
204+
},
205+
),
206+
),
207+
);
208+
```

0 commit comments

Comments
 (0)