How To Use Extensions

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.

Quick Start

Using Existing Extensions

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.

---

Creating Your Own Extension

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.

Built-in Extensions

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)

ImageExtension

Examples coming soon

OnImageTapExtension

Examples coming soon

MatcherExtension

Examples coming soon

TagExtension

Examples coming soon

TagWrapExtension

Examples coming soon

First-Party Extensions

In progress

Internal Details

In progress

Further Examples

In progress