lutter_html 3.0.0 copy "flutter_html: ^3.0.0" to clipboard
Published 8 months ago • verified publishersub6resources.com
SDKFlutterPlatformAndroidiOSLinuxmacOSwebWindows
2.1k
Readme
Changelog
Example
Installing
Versions
Scores
flutter_html
pub package codecov GitHub Actions MIT License

A Flutter widget for rendering HTML and CSS as Flutter widgets.

Widget build(context) {
return Html(
data: """
<h1>Hello, World!</h1>
<p><span style="font-style:italic;">flutter_html</span> supports a variety of HTML and CSS tags and attributes.</p>
<p>Over a hundred static tags are supported out of the box.</p>
<p>Or you can even define your own using an <code>Extension</code>: <flutter></flutter></p>
<p>Its easy to add custom styles to your Html as well using the <code>Style</code> class:</p>
<p class="fancy">Here's a fancy &lt;p&gt; element!</p>
""",
extensions: [
TagExtension(
tagsToExtend: {"flutter"},
child: const FlutterLogo(),
),
],
style: {
"p.fancy": Style(
textAlign: TextAlign.center,
padding: const EdgeInsets.all(16),
backgroundColor: Colors.grey,
margin: Margins(left: Margin(50, Unit.px), right: Margin.auto()),
width: Width(300, Unit.px),
fontWeight: FontWeight.bold,
),
},
);
}
becomes...

A screenshot showing the above code snippet rendered using flutter_html
Table of Contents:
Supported HTML Tags

Supported CSS Attributes

Why flutter_html?

Migration Guide

API Reference

Constructors

Parameters Table

External Packages

flutter_html_all

flutter_html_audio

flutter_html_iframe

flutter_html_math

flutter_html_svg

flutter_html_table

flutter_html_video

Frequently Asked Questions

Example

Why this package?
This package is designed with simplicity in mind. Originally created to allow basic rendering of HTML content into the Flutter widget tree, this project has expanded to include support for basic styling as well!

If you need something more robust and customizable, the package also provides a number of extension APIs for extremely granular control over widget rendering!

Migration Guides
3.0.0 Migration Guide

API Reference:
For the full API reference, see here.

For a full example, see here.

Below, you will find brief descriptions of the parameters theHtml widget accepts and some code snippets to help you use this package.

Constructors:
The package currently has two different constructors - Html() and Html.fromDom().

The Html() constructor is for those who would like to directly pass HTML from the source to the package to be rendered.

If you would like to modify or sanitize the HTML before rendering it, then Html.fromDom() is for you - you can convert the HTML string to a Document and use its methods to modify the HTML as you wish. Then, you can directly pass the modified Document to the package. This eliminates the need to parse the modified Document back to a string, pass to Html(), and convert back to a Document, thus cutting down on load times.

Parameters:
Parameters Description
data The HTML data passed to the Html widget. This is required and cannot be null when using Html().
document The DOM document passed to the Html widget. This is required and cannot be null when using Html.fromDom().
onLinkTap Optional. A function that defines what the widget should do when a link is tapped. The function exposes the src of the link as a String to use in your implementation.
extensions Optional. A powerful API that allows you to customize everything when rendering a specific HTML tag.