Skip to content

How To Use Extensions

Jump to bottom
Matthew Whitaker edited this page Mar 12, 2025 · 8 revisions

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:

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

ImageExtension

Examples coming soon

OnImageTapExtension

Examples coming soon

MatcherExtension

Examples coming soon

TagExtension

Examples coming soon

TagWrapExtension

Examples coming soon

First-Party Extensions

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:

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

AudioHtmlExtension

Available in flutter_html_audio

Details coming soon

IframeHtmlExtension

Available in flutter_html_iframe

Details coming soon

MathHtmlExtension

Available in flutter_html_math

Details coming soon

SvgHtmlExtension

Available in flutter_html_svg

Details coming soon

TableHtmlExtension

Available in flutter_html_table

Details coming soon

VideoHtmlExtension

Available in flutter_html_video

Details coming soon

Internal Details

In progress

Further Examples

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

Clone this wiki locally