diff --git a/README.md b/README.md index a1bd9fb111..ac21d30ef1 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,11 @@ A Flutter widget for rendering html and css as Flutter widgets. +

A Screenshot of flutter_html Another Screenshot of flutter_html Yet another Screenshot of flutter_html +

## 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 \ No newline at end of file diff --git a/example/README.md b/example/README.md index a135626028..a8bc76b67d 100644 --- a/example/README.md +++ b/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: """ +
+

Demo Page

+

This is a fantastic product that you should buy!

+

Features

+ + +
+ """, + //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 = """ +

Header 1

+

Header 2

+

Header 3

+

Header 4

+
Header 5
+
Header 6
+

Ruby Support:

+

+ + 漢かん + 字じ + +  is Japanese Kanji. +

+

Support for sub/sup

+ Solve for xn: log2(x2+n) = 93 +

One of the most common equations in all of physics is
E=mc2.

+

Table support (with custom styling!):

+

+ Famous quote... +

+ + + + + + + + + + + + + + + + + + + + +
OneTwoThree
DataDataData
DataDataData
fDatafDatafData
+

Custom Element Support:

+ + +

SVG support:

+ + + + + +

List support:

+
    +
  1. This
    2. +

  2. is

    3. +
  3. an
    4. +
  4. + ordered + +
    5. +
  5. list! Lorem ipsum dolor sit amet.
    6. +

  6. Header 2

    7. +

  7. Header 2

    8. +
+

Link support:

+

+ Linking to websites has never been easier. +

+

Image support:

+

+ Google + Google + Alt Text of an intentionally broken image +

+ +"""; +``` -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); + }, + ), + ), + ); +``` \ No newline at end of file