From 46a4230067615a01d3b9c4c3f75c9b69bc886bfc Mon Sep 17 00:00:00 2001 From: hey24sheep Date: Mon, 15 Jun 2020 13:35:08 +0530 Subject: [PATCH 1/3] - Readme updated for package - Detailed examples added to example readme --- README.md | 13 ++- example/README.md | 212 +++++++++++++++++++++++++++++++++++++++++++--- 2 files changed, 214 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index a1bd9fb111..202092b4ab 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/hey24sheep/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..fb388da724 100644 --- a/example/README.md +++ b/example/README.md @@ -1,16 +1,208 @@ -# 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 +
      +
    • With

      ...
      • +
    • a
      • +
    • nested
      • +
    • unordered +
        +
      1. With a nested
        2. +
      2. ordered list.
        3. +
      +
      • +
    • list
      • +
    +
    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, +// color: Colors.white, + ), +// "h1": Style( +// textAlign: TextAlign.center, +// ), + "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 From 757f9cf751d9a9ebaaa0e50fb1996253ac0b3b6d Mon Sep 17 00:00:00 2001 From: hey24sheep Date: Sun, 28 Jun 2020 14:44:16 +0530 Subject: [PATCH 2/3] changed example repo reference --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 202092b4ab..ac21d30ef1 100644 --- a/README.md +++ b/README.md @@ -35,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](https://github.com/hey24sheep/flutter_html/tree/master/example). +(For a much more extensive example, look at [example](https://github.com/Sub6Resources/flutter_html/tree/master/example). ```dart Widget html = Html( data: """ From 3ab7992eed565a480783f193810a12fe1ad40323 Mon Sep 17 00:00:00 2001 From: hey24sheep Date: Mon, 7 Sep 2020 13:11:38 +0530 Subject: [PATCH 3/3] removed comments from example/readme --- example/README.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/example/README.md b/example/README.md index fb388da724..a8bc76b67d 100644 --- a/example/README.md +++ b/example/README.md @@ -162,11 +162,7 @@ const htmlData = """ style: { "html": Style( backgroundColor: Colors.black12, -// color: Colors.white, ), -// "h1": Style( -// textAlign: TextAlign.center, -// ), "table": Style( backgroundColor: Color.fromARGB(0x50, 0xee, 0xee, 0xee), ),