Merge pull request #326 from hey24sheep/master

Readme updated for package and examples

README.md

@@ -6,9 +6,11 @@
 
 A Flutter widget for rendering html and css as Flutter widgets.
 
+<p>
 <img alt="A Screenshot of flutter_html" src=".github/flutter_html_screenshot.png" width="300"/>
 <img alt="Another Screenshot of flutter_html" src=".github/flutter_html_screenshot2.png" width="300"/>
 <img alt="Yet another Screenshot of flutter_html" src=".github/flutter_html_screenshot3.png" width="300"/>
+</p>
 
 ## Installing:
 
@@ -33,7 +35,7 @@ This package is designed with simplicity in mind. Originally created to allow ba
 this project has expanded to include support for basic styling as well!.
 
 ## Example Usage:
-(For a much more extensive example, look at example/main.dart).
+(For a much more extensive example, look at [example](https://github.com/Sub6Resources/flutter_html/tree/master/example).
 ```dart
     Widget html = Html(
       data: """
@@ -70,3 +72,12 @@ this project has expanded to include support for basic styling as well!.
         // Display the image in large form.
       },
     );
+```
+
+## Migration Guides
+- For Version 1.0 [Guide](https://github.com/Sub6Resources/flutter_html/wiki/1.0.0-Migration-Guide)
+
+## Contribution Guide
+> Coming soon!
+>
+> Meanwhile, PRs are always welcome

example/README.md

@@ -1,16 +1,204 @@
-# example
+# Example
 
-A new Flutter project.
+Detailed Example for flutter_html package
 
-## Getting Started
+# Basic Example 
+```dart
+    Widget html = Html(
+      data: """
+        <div>
+          <h1>Demo Page</h1>
+          <p>This is a fantastic product that you should buy!</p>
+          <h3>Features</h3>
+          <ul>
+            <li>It actually works</li>
+            <li>It exists</li>
+            <li>It doesn't cost much!</li>
+          </ul>
+          <!--You can pretty much put any html in here!-->
+        </div>
+      """,
+      //Optional parameters:
+      backgroundColor: Colors.white70,
+      onLinkTap: (url) {
+        // open url in a webview
+      },
+      style: {
+        "div": Style(
+          block: Block(
+            margin: EdgeInsets.all(16),
+            border: Border.all(width: 6),
+            backgroundColor: Colors.grey,
+          ),
+          textStyle: TextStyle(
+            color: Colors.red,
+          ),
+        ),
+      },
+      onImageTap: (src) {
+        // Display the image in large form.
+      },
+    );
+```
 
-This project is a starting point for a Flutter application.
+# Detailed Example
 
-A few resources to get you started if this is your first Flutter project:
+## Example HTML data string/body
 
-- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
-- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
+```html
+const htmlData = """
+<h1>Header 1</h1>
+<h2>Header 2</h2>
+<h3>Header 3</h3>
+<h4>Header 4</h4>
+<h5>Header 5</h5>
+<h6>Header 6</h6>
+<h3>Ruby Support:</h3>
+      <p>
+        <ruby>
+          漢<rt>かん</rt>
+          字<rt>じ</rt>
+        </ruby>
+        &nbsp;is Japanese Kanji.
+      </p>
+      <h3>Support for <code>sub</code>/<code>sup</code></h3>
+      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>
+      <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>
+      <h3>Table support (with custom styling!):</h3>
+      <p>
+      <q>Famous quote...</q>
+      </p>
+      <table>
+      <colgroup>
+        <col width="50%" />
+        <col width="25%" />
+        <col width="25%" />
+      </colgroup>
+      <thead>
+      <tr><th>One</th><th>Two</th><th>Three</th></tr>
+      </thead>
+      <tbody>
+      <tr>
+        <td>Data</td><td>Data</td><td>Data</td>
+      </tr>
+      <tr>
+        <td>Data</td><td>Data</td><td>Data</td>
+      </tr>
+      </tbody>
+      <tfoot>
+      <tr><td>fData</td><td>fData</td><td>fData</td></tr>
+      </tfoot>
+      </table>
+      <h3>Custom Element Support:</h3>
+      <flutter></flutter>
+      <flutter horizontal></flutter>
+      <h3>SVG support:</h3>
+      <svg id='svg1' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'>
+            <circle r="32" cx="35" cy="65" fill="#F00" opacity="0.5"/>
+            <circle r="32" cx="65" cy="65" fill="#0F0" opacity="0.5"/>
+            <circle r="32" cx="50" cy="35" fill="#00F" opacity="0.5"/>
+      </svg>
+      <h3>List support:</h3>
+      <ol>
+            <li>This</li>
+            <li><p>is</p></li>
+            <li>an</li>
+            <li>
+            ordered
+            <ul>
+            <li>With<br /><br />...</li>
+            <li>a</li>
+            <li>nested</li>
+            <li>unordered
+            <ol>
+            <li>With a nested</li>
+            <li>ordered list.</li>
+            </ol>
+            </li>
+            <li>list</li>
+            </ul>
+            </li>
+            <li>list! Lorem ipsum dolor sit amet.</li>
+            <li><h2>Header 2</h2></li>
+            <h2><li>Header 2</li></h2>
+      </ol>
+      <h3>Link support:</h3>
+      <p>
+        Linking to <a href='https://github.com'>websites</a> has never been easier.
+      </p>
+      <h3>Image support:</h3>
+      <p>
+        <img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' />
+        <a href='https://google.com'><img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></a>
+        <img alt='Alt Text of an intentionally broken image' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30d' />
+      </p>
+      <!--
+      <h3>Video support:</h3>
+      <video controls>
+        <source src="https://www.w3schools.com/html/mov_bbb.mp4" />
+      </video>
+      <h3>Audio support:</h3>
+      <audio controls>
+        <source src="https://www.w3schools.com/html/horse.mp3" />
+      </audio>
+      <h3>IFrame support:</h3>
+      <iframe src="https://google.com"></iframe>
+      -->
+""";
+```
 
-For help getting started with Flutter, view our
-[online documentation](https://flutter.dev/docs), which offers tutorials,
-samples, guidance on mobile development, and a full API reference.
+
+## How to use
+```dart
+  return new Scaffold(
+      appBar: AppBar(
+        title: Text('flutter_html Example'),
+        centerTitle: true,
+      ),
+      body: SingleChildScrollView(
+        child: Html(
+          data: htmlData,
+          //Optional parameters:
+          style: {
+            "html": Style(
+              backgroundColor: Colors.black12,
+            ),
+            "table": Style(
+              backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee),
+            ),
+            "tr": Style(
+              border: Border(bottom: BorderSide(color: Colors.grey)),
+            ),
+            "th": Style(
+              padding: EdgeInsets.all(6),
+              backgroundColor: Colors.grey,
+            ),
+            "td": Style(
+              padding: EdgeInsets.all(6),
+            ),
+            "var": Style(fontFamily: 'serif'),
+          },
+          customRender: {
+            "flutter": (RenderContext context, Widget child, attributes, _) {
+              return FlutterLogo(
+                style: (attributes['horizontal'] != null)
+                    ? FlutterLogoStyle.horizontal
+                    : FlutterLogoStyle.markOnly,
+                textColor: context.style.color,
+                size: context.style.fontSize.size * 5,
+              );
+            },
+          },
+          onLinkTap: (url) {
+            print("Opening $url...");
+          },
+          onImageTap: (src) {
+            print(src);
+          },
+          onImageError: (exception, stackTrace) {
+            print(exception);
+          },
+        ),
+      ),
+    );
+```