Giter Club home page Giter Club logo

flutter_html's Introduction

flutter_html

pub package CircleCI

A Flutter widget for rendering static html tags as Flutter widgets. (Will render over 70 different html tags!)

Installing:

Add the following to your pubspec.yaml file:

dependencies:
  flutter_html: ^0.9.4

Currently Supported HTML Tags:

a, abbr, acronym, address, article, aside, b, bdi, bdo, big, blockquote, body, br, caption, cite, code, data, dd, del, dfn, div, dl, dt, em, figcaption, figure, footer, h1, h2, h3, h4, h5, h6, header, hr, i, img, ins, kbd, li, main, mark, nav, noscript, ol, p, pre, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, sup, table, tbody, td, template, tfoot, th, thead, time, tr, tt, u, ul, var

Partially supported elements:

These are common elements that aren't yet fully supported, but won't be ignored and will still render somewhat correctly.

center, font

List of planned supported elements:

These are elements that are planned, but present a specific challenge that makes them somewhat difficult to implement.

audio, details, source, summary, svg, track, video, wbr

List of elements that I don't plan on implementing:

Feel free to open an issue if you have a good reason and feel like you can convince me to implement them. A well written and complete pull request implementing one of these is always welcome, though I cannot promise I will merge them.

Note: These unsupported tags will just be ignored.

applet, area, base, basefont, button, canvas, col, colgroup, datalist, dialog, dir, embed, fieldset, form, frame, frameset, head, iframe, input, label, legend, link, map, meta, meter, noframe, object, optgroup, option, output, param, picture, progress, script, select, style, textarea, title

Why this package?

This package is designed with simplicity in mind. Flutter currently does not support rendering of web content into the widget tree. This package is designed to be a reasonable alternative for rendering static web content until official support is added.

Update:

The official Flutter WebView package has been created and is in a developer preview. It's not stable yet, so I'll continue to support this project at least until webview_flutter hits 1.0.0.

Check out the official Flutter WebView package here: https://pub.dartlang.org/packages/webview_flutter

Example Usage:

Html(
  data: """
    <!--For a much more extensive example, look at example/main.dart-->
    <div>
      <h1>Demo Page</h1>
      <p>This is a fantastic nonexistent product that you should buy!</p>
      <h2>Pricing</h2>
      <p>Lorem ipsum <b>dolor</b> sit amet.</p>
      <h2>The Team</h2>
      <p>There isn't <i>really</i> a team...</p>
      <h2>Installation</h2>
      <p>You <u>cannot</u> install a nonexistent product!</p>
      <!--You can pretty much put any html in here!-->
    </div>
  """,
  //Optional parameters:
  padding: EdgeInsets.all(8.0),
  backgroundColor: Colors.white70,
  defaultTextStyle: TextStyle(fontFamily: 'serif'),
  onLinkTap: (url) {
    // open url in a webview
  },
  customRender: (node, children) {
    if(node is dom.Element) {
      switch(node.localName) {
        case "video": return Chewie(...);
        case "custom_tag": return CustomWidget(...);
      }
    }
  },
)

useRichText parameter

This package has a known issue where text does not wrap correctly. Setting useRichText to true fixes the issue by using an alternate parser. The alternate parser, however, does not support the customRender callback, and several elements supported by the default parser are not supported by the alternate parser.

flutter_html's People

Contributors

sub6resources avatar jeffmikels avatar kieferlam avatar edward608 avatar ominibyte avatar wwwdata avatar loitran avatar jlcool avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.