Repository files navigation

A Flutter widget for rendering HTML and CSS as Flutter widgets.

Widgetbuild(context) {returnHtml(    data:"""        <h1>Hello, World!</h1>        <p><span>flutter_html</span> supports a variety of HTML and CSS tags and attributes.</p>        <p>Over a hundred static tags are supported out of the box.</p>        <p>Or you can even define your own using an <code>Extension</code>: <flutter></flutter></p>        <p>Its easy to add custom styles to your Html as well using the <code>Style</code> class:</p>        <p>Here's a fancy &lt;p&gt; element!</p>        """,    extensions: [TagExtension(        tagsToExtend: {"flutter"},        child:constFlutterLogo(),      ),    ],    style: {"p.fancy":Style(        textAlign:TextAlign.center,        padding:constEdgeInsets.all(16),        backgroundColor:Colors.grey,        margin:Margins(left:Margin(50,Unit.px), right:Margin.auto()),        width:Width(300,Unit.px),        fontWeight:FontWeight.bold,      ),    },  );}

becomes...

• Supported HTML Tags

• Supported CSS Attributes

• Why flutter_html?

• Migration Guide

• API Reference

  • Constructors

  • Parameters Table

• External Packages

  • flutter_html_all

  • flutter_html_audio

  • flutter_html_iframe

  • flutter_html_math

  • flutter_html_svg

  • flutter_html_table

  • flutter_html_video

• Frequently Asked Questions

• Example

This package is designed with simplicity in mind. Originally created to allow basic rendering of HTML content into the Flutter widget tree,this project has expanded to include support for basic styling as well!

If you need something more robust and customizable, the package also provides a number of extension APIs for extremely granular control over widget rendering!

3.0.0 Migration Guide

For the full API reference, seehere.

For a full example, seehere.

Below, you will find brief descriptions of the parameters theHtml widget accepts and some code snippets to help you use this package.

The package currently has two different constructors -Html() andHtml.fromDom().

TheHtml() constructor is for those who would like to directly pass HTML from the source to the package to be rendered.

If you would like to modify or sanitize the HTML before rendering it, thenHtml.fromDom() is for you - you can convert the HTML string to aDocument and use its methods to modify the HTML as you wish. Then, you can directly pass the modifiedDocument to the package. This eliminates the need to parse the modifiedDocument back to a string, pass toHtml(), and convert back to aDocument, thus cutting down on load times.

More examples and in-depth details are available:

• Style.
• HtmlExtension

This package is simply a convenience package that exports all the other external packages below. You should use this if you plan to render all the tags that require external dependencies.

This package renders audio elements using thechewie_audio and thevideo_player plugin.

The package considers the attributescontrols,loop,src,autoplay,width, andmuted when rendering the audio widget.

Add the dependency to your pubspec.yaml:

flutter pub add flutter_html_audio

import'package:flutter_html_audio/flutter_html_audio.dart';Widget html=Html(  data: myHtml,  extensions: [AudioHtmlExtension(),  ],);

This package renders iframes using thewebview_flutter plugin.

When rendering iframes, the package considers the width, height, and sandbox attributes.

Sandbox controls the JavaScript mode of the webview - a value ofnull orallow-scripts will setjavascriptMode: JavascriptMode.unrestricted, otherwise it will setjavascriptMode: JavascriptMode.disabled.

Add the dependency to your pubspec.yaml:

flutter pub add flutter_html_iframe

import'package:flutter_html_iframe/flutter_html_iframe.dart';Widget html=Html(  data: myHtml,  extensions: [IframeHtmlExtension(),  ],);

You can set thenavigationDelegate of the webview with thenavigationDelegate property onIframeHtmlExtension. This allows you to block or allow the loading of certain URLs.

This package renders MathML elements using theflutter_math_fork plugin.

When rendering MathML, the package takes the MathML data within the<math> tag and tries to parse it to Tex. Then, it will pass the parsed string toflutter_math_fork.

Because this package is parsing MathML to Tex, it may not support some functionalities. The current list of supported tags can be foundon the Wiki, but some of these only have partial support at the moment.

Add the dependency to your pubspec.yaml:

flutter pub add flutter_html_math

import'package:flutter_html_math/flutter_html_math.dart';Widget html=Html(  data: myHtml,  extensions: [MathHtmlExtension(),  ],);

If the parsing errors, you can use theonMathErrorBuilder property ofMathHtmlException to catch the error and potentially fix it on your end.

The function exposes the parsed TexString, as well as the error and error with type fromflutter_math_fork as aString.

You can analyze the error and the parsed string, and finally return a new instance ofMath.tex() with the corrected Tex string.

If you have a Tex string you'd like to render inside your HTML you can do that using the sameflutter_math_fork plugin.

Use a custom tag inside your HTML (an example could be<tex>), and place yourraw Tex string inside.

Then, use theextensions parameter to add the widget to render Tex. It could look like this:

Widget htmlWidget=Html(  data:r"""<tex>i\hbar\frac{\partial}{\partial t}\Psi(\vec x,t) = -\frac{\hbar}{2m}\nabla^2\Psi(\vec x,t)+ V(\vec x)\Psi(\vec x,t)</tex>""",  extensions: [TagExtension(      tagsToExtend: {"tex"},      builder: (extensionContext) {returnMath.tex(          extensionContext.innerHtml,          mathStyle:MathStyle.display,          textStyle: extensionContext.styledElement?.style.generateTextStyle(),          onErrorFallback: (FlutterMathException e) {//optionally try and correct the Tex string herereturnText(e.message);          },        );      }    ),  ],);

This package renders svg elements using theflutter_svg plugin.

When rendering SVGs, the package takes the SVG data within the<svg> tag and passes it toflutter_svg. Thewidth andheight attributes are considered while rendering, if given.

The package also exposes a few ways to render SVGs within an<img> tag, specifically base64 SVGs, asset SVGs, and network SVGs.

Add the dependency to your pubspec.yaml:

flutter pub add flutter_html_svg

import'package:flutter_html_svg/flutter_html_svg.dart';Widget html=Html(  data: myHtml,  extensions: [SvgHtmlExtension(),  ],);

This package renders table elements using theflutter_layout_grid plugin.

When rendering table elements, the package tries to calculate the best fit for each element and size its cell accordingly.Rowspans andcolspans are considered in this process, so cells that span across multiple rows and columns are rendered as expected. Heights are determined intrinsically to maintain an optimal aspect ratio for the cell.

Add the dependency to your pubspec.yaml:

flutter pub add flutter_html_table

import'package:flutter_html_table/flutter_html_table.dart';Widget html=Html(  data: myHtml,  extensions: [TableHtmlExtension(),  ],);

This package renders video elements using thechewie and thevideo_player plugin.

The package considers the attributescontrols,loop,src,autoplay,poster,width,height, andmuted when rendering the video widget.

Add the dependency to your pubspec.yaml:

flutter pub add flutter_html_video

import'package:flutter_html_video/flutter_html_video.dart';Widget html=Html(  data: myHtml,  extensions: [VideoHtmlExtension(),  ],);

Have you followed the instructions as describedabove?

If so, feel free to file an issue or start a discussion for some extra help.

See theabove example.

If you'd like to use this widget inside of aRow(), make sure to setshrinkWrap: true and place your widget inside expanded:

Widget row=Row(   children: [Expanded(            child:Html(              shrinkWrap:true,//other params            )        ),//whatever other widgets   ]);

Here's what the example in example/lib/main.dart looks like after being run (in Chrome):