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

In progress

First-Party Extensions

In progress

Internal Details

In progress

Further Examples

In progress