flutter_html

flutter_html is an open-source Flutter widget that converts HTML and CSS into native Flutter widgets, letting you render web content directly inside a Flutter app.

What is flutter_html?

flutter_html is a Flutter widget library that takes an HTML string (or a parsed DOM Document) as input and outputs native Flutter widgets on the widget tree. It runs on any platform Flutter supports (Android, iOS, web, desktop) and is maintained by Sub6Resources on GitHub. The package renders over 80 HTML tags out of the box and lets you style them with inline CSS as well as programmatic selectors.

Key Features

• Static HTML rendering — Converts over 80 HTML tags (headings, paragraphs, links, lists, images, and more) into Flutter widgets without needing a webview.
• Inline CSS support — Applies CSS attributes such as color, font-style, margin, padding, and text-align directly from style attributes, plus a Style class for selector-based styling like "p.fancy".
• Extensions API — TagExtension lets you replace built-in tags or add custom tags with your own Flutter widgets; HtmlExtension gives full control over how a tag is rendered.
• Two constructors — Html() accepts a raw HTML string, while Html.fromDom() takes a pre-parsed Document so you can sanitize or modify the HTML before rendering, cutting down on parse time.
• Filtering options — onlyRenderTheseTags and doNotRenderTheseTags let you whitelist or blacklist specific elements (note that the document is wrapped in <html> and <body>).
• Link tap handling — onLinkTap gives you the tapped link's src string so you can navigate or intercept clicks.
• External package ecosystem — Separate packages under the flutter_html umbrella add support for audio (flutter_html_audio), iframes (flutter_html_iframe), MathML (flutter_html_math), SVG (flutter_html_svg), tables (flutter_html_table), and video (flutter_html_video), each backed by a popular Flutter plugin like chewie, webview_flutter, flutter_svg, and flutter_layout_grid.
• Shrink-wrap control — shrinkWrap: true allows the widget to size itself to its content inside a Row or Column.

Who should use flutter_html?

• Flutter app developers rendering HTML content from web APIs, CMS content, or email bodies directly in their app without a webview.
• Developers building documentation or rich-text views who need to display formatted text, images, and links using HTML that is already styled with CSS.
• Teams needing multimedia embedding for audio, video, or iframes in Flutter, since the external packages provide a first-party way to render those elements.

What can you do with flutter_html?

• Display remote HTML: Pass a string fetched from an API or asset to Html(data: ...) and get a ready-to-use widget tree.
• Sanitize before rendering: Parse HTML into a Document, remove unwanted nodes, then pass it with Html.fromDom() to avoid re-parsing.
• Render LaTeX: Use the flutter_html_math extension or a custom TagExtension with Math.tex() to display TeX strings embedded in HTML.
• Embed video and audio: With flutter_html_video and flutter_html_audio, HTML5 <video> and <audio> elements become interactive players powered by chewie and video_player.

How does flutter_html work?

You give the Html widget either a raw HTML string or a parsed Document. The package parses the HTML and builds a tree of Flutter widgets corresponding to each tag, applying inline styles and any Style rules you define. When a tag matches an extension, that extension's builder takes over rendering, so you can swap in any custom widget.

What are the pros and cons?

Pros:

• Supports over 80 tags out of the box with inline CSS.
• Highly extendable through custom tag builders and style selectors.
• Free under the MIT license with an active GitHub repository.

Cons:

• Audio, iframe, math, svg, table, and video tags require adding separate external packages to your pubspec.
• MathML support is partial because flutter_html_math converts MathML to TeX and may not handle every MathML tag.

Pricing

Free — flutter_html is open-source and distributed under the MIT License, so you can use it in commercial apps without paying a license fee.

FAQ

Why can't I get <audio>, <iframe>, <math>, <svg>, <table>, or <video> to show up?

These tags are not rendered by the base package. You must install the matching external package (e.g., flutter_html_svg) and add its extension to the extensions list of your Html widget, as shown in the External Packages section.

How can I render LaTeX in my HTML?

flutter_html can render TeX if you use the flutter_html_math extension for MathML, or you can define a custom tag (like <tex>) with your own TagExtension that calls Math.tex() from flutter_math_fork.

How do I use this inside of a Row()?

Set shrinkWrap: true on the Html widget and wrap it in an Expanded widget so it can size itself within the row's constraints. The package's FAQ shows this exact pattern.

Is flutter_html free?

Yes, the package is published under the MIT License, and the source code is publicly available on GitHub. You can use it in personal and commercial projects without cost.