flutter_html handles the parsing and layout for a wide range of HTML tags and CSS attributes. With this core package, we aim for the minimal number of dependencies, so we don't support many interactive or more complicated layouts (e.g. video, table) directly in the core package. However, there are many cases where this basic support is not sufficient. flutter_html has an extensive "Extensions" API that allows first- and third-party developers to extend the basic functionality of flutter_html. This guide describes the basics of working with this Extension API.

In many cases, the extension you wish to use has already been created. In this case, it's easy to get it attached to your Html widget.

For example, here's how one would use the first-party TableHtmlExtension to render the <table> element:

import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_html_table/flutter_html_table.dart';

Widget build(BuildContext context) {
  return Html(
    data: """<table><tr><td>Hello</td><td>World</td></tr></table>""",
    extensions: [
      TableHtmlExtension(),
    ],
  );
}

For more about first-party extensions, see below.

Another common use case is wrapping a specific type of tag in a Widget. Here's an example using the built-in TagWrapExtension:

import 'package:flutter_html/flutter_html.dart';

Widget build(BuildContext context) {
  return Html(
    data: """<p style="padding: 16px; background-color: blue; color: white; text-align: center;">Push Me</p>""",
    extensions: [
      TagWrapExtension(
        tagsToWrap: {'p'},
        builder: (child) {
          return GestureDetector(
            onTap: () => print("Hello, World!"),
            child: child,
          );
        },
      ),
    ],
  );
}

For more examples of built-in extensions, see below.

In the most complex cases, you may need to define your own class that extends HtmlExtension. That's beyond the scope of this Quick Start tutorial, but see Internal Details below for help getting started, and don't hesitate to submit a question on our discussion board.

The following Extensions ship with flutter_html for convenience and common use cases:

• ImageExtension (custom image handling)
• OnImageTapExtension (handle image interaction)
• MatcherExtension (custom behavior for html nodes that match a given matcher function)
• TagExtension (custom behavior for html elements that have the given tag names)
• TagWrapExtension (wrap any html element in a custom Widget)

Feel free to propose or submit additional extensions for consideration. Consult the guidelines for details.

Examples coming soon

Examples coming soon

Examples coming soon

Examples coming soon

Examples coming soon

These extensions are available as separate packages, since they have dependencies which the average user likely won't need. Note that if you need access to all of these extensions, installing and importing the flutter_html_all package will automatically give you access to all of these without having to depend on each one individually.

The following first-party extensions are available:

• AudioHtmlExtension (adds support for <audio> tag)
• IframeHtmlExtension (adds support for <iframe> tag)
• MathHtmlExtension (adds support for MathML and Tex)
• SvgHtmlExtension (adds support for <svg> tag and .svg images in the <img> tag)
• TableHtmlExtension (adds support for the <table> tag and friends)
• VideoHtmlExtension (adds support for the <video> tag)

Feel free to propose or submit additional extension packages for consideration. Consult the guidelines for details.

Available in flutter_html_audio

Details coming soon

Available in flutter_html_iframe

Details coming soon

Available in flutter_html_math

Details coming soon

Available in flutter_html_svg

Details coming soon

Available in flutter_html_table

Details coming soon

Available in flutter_html_video

Details coming soon

In progress

These are meant to provide more examples of the Extension API in action. We'll add to these from time to time to demonstrate different behaviors or respond to discussion posts or issue reports asking for functionality that can be obtained straightforwardly using the Extension API.

Coming soon