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
styleattributes, plus aStyleclass for selector-based styling like"p.fancy". - Extensions API —
TagExtensionlets you replace built-in tags or add custom tags with your own Flutter widgets;HtmlExtensiongives full control over how a tag is rendered. - Two constructors —
Html()accepts a raw HTML string, whileHtml.fromDom()takes a pre-parsedDocumentso you can sanitize or modify the HTML before rendering, cutting down on parse time. - Filtering options —
onlyRenderTheseTagsanddoNotRenderTheseTagslet you whitelist or blacklist specific elements (note that the document is wrapped in<html>and<body>). - Link tap handling —
onLinkTapgives you the tapped link'ssrcstring so you can navigate or intercept clicks. - External package ecosystem — Separate packages under the
flutter_htmlumbrella 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 likechewie,webview_flutter,flutter_svg, andflutter_layout_grid. - Shrink-wrap control —
shrinkWrap: trueallows the widget to size itself to its content inside aRoworColumn.
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 withHtml.fromDom()to avoid re-parsing. - Render LaTeX: Use the
flutter_html_mathextension or a customTagExtensionwithMath.tex()to display TeX strings embedded in HTML. - Embed video and audio: With
flutter_html_videoandflutter_html_audio, HTML5<video>and<audio>elements become interactive players powered bychewieandvideo_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_mathconverts 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.
