{"id":17085655,"url":"https://github.com/sub6resources/flutter_html","last_synced_at":"2025-05-14T12:02:35.291Z","repository":{"id":37701308,"uuid":"144741508","full_name":"Sub6Resources/flutter_html","owner":"Sub6Resources","description":"A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)","archived":false,"fork":false,"pushed_at":"2025-03-12T21:31:31.000Z","size":3254,"stargazers_count":1848,"open_issues_count":125,"forks_count":903,"subscribers_count":27,"default_branch":"master","last_synced_at":"2025-05-06T09:29:45.587Z","etag":null,"topics":["flutter","flutter-html","flutter-package","flutter-widget","flutter-widgets","html-css","html-parser","html-tags"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/flutter_html","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Sub6Resources.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"Sub6Resources","patreon":null,"open_collective":"flutter_html","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2018-08-14T15:50:25.000Z","updated_at":"2025-05-06T01:19:26.000Z","dependencies_parsed_at":"2023-12-15T09:48:44.865Z","dependency_job_id":"995e202c-25b0-48d7-b7cb-9941859aa14c","html_url":"https://github.com/Sub6Resources/flutter_html","commit_stats":{"total_commits":619,"total_committers":75,"mean_commits":8.253333333333334,"dds":0.7092084006462036,"last_synced_commit":"79ec194fa6690e5caba58f5eca04e6748394bb6b"},"previous_names":[],"tags_count":96,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sub6Resources%2Fflutter_html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sub6Resources%2Fflutter_html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sub6Resources%2Fflutter_html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sub6Resources%2Fflutter_html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sub6Resources","download_url":"https://codeload.github.com/Sub6Resources/flutter_html/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252771944,"owners_count":21801817,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","flutter-html","flutter-package","flutter-widget","flutter-widgets","html-css","html-parser","html-tags"],"created_at":"2024-10-14T13:25:33.263Z","updated_at":"2025-05-06T21:31:09.573Z","avatar_url":"https://github.com/Sub6Resources.png","language":"Dart","funding_links":["https://github.com/sponsors/Sub6Resources","https://opencollective.com/flutter_html"],"categories":[],"sub_categories":[],"readme":"# flutter_html\n[![pub package](https://img.shields.io/pub/v/flutter_html.svg)](https://pub.dev/packages/flutter_html)\n[![codecov](https://codecov.io/gh/Sub6Resources/flutter_html/branch/master/graph/badge.svg)](https://codecov.io/gh/Sub6Resources/flutter_html)\n[![GitHub Actions](https://github.com/Sub6Resources/flutter_html/actions/workflows/test.yml/badge.svg)](https://github.com/Sub6Resources/flutter_html/actions)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://github.com/Sub6Resources/flutter_html/blob/master/LICENSE)\n\nA Flutter widget for rendering HTML and CSS as Flutter widgets.\n\n```dart\nWidget build(context) {\n  return Html(\n    data: \"\"\"\n        \u003ch1\u003eHello, World!\u003c/h1\u003e\n        \u003cp\u003e\u003cspan style=\"font-style:italic;\"\u003eflutter_html\u003c/span\u003e supports a variety of HTML and CSS tags and attributes.\u003c/p\u003e\n        \u003cp\u003eOver a hundred static tags are supported out of the box.\u003c/p\u003e\n        \u003cp\u003eOr you can even define your own using an \u003ccode\u003eExtension\u003c/code\u003e: \u003cflutter\u003e\u003c/flutter\u003e\u003c/p\u003e\n        \u003cp\u003eIts easy to add custom styles to your Html as well using the \u003ccode\u003eStyle\u003c/code\u003e class:\u003c/p\u003e\n        \u003cp class=\"fancy\"\u003eHere's a fancy \u0026lt;p\u0026gt; element!\u003c/p\u003e\n        \"\"\",\n    extensions: [\n      TagExtension(\n        tagsToExtend: {\"flutter\"},\n        child: const FlutterLogo(),\n      ),\n    ],\n    style: {\n      \"p.fancy\": Style(\n        textAlign: TextAlign.center,\n        padding: const EdgeInsets.all(16),\n        backgroundColor: Colors.grey,\n        margin: Margins(left: Margin(50, Unit.px), right: Margin.auto()),\n        width: Width(300, Unit.px),\n        fontWeight: FontWeight.bold,\n      ),\n    },\n  );\n}\n```\n\nbecomes...\n\n\u003cimg src=\"https://raw.githubusercontent.com/Sub6Resources/flutter_html/master/example/screenshots/flutter_html_readme_screenshot.png\" alt=\"A screenshot showing the above code snippet rendered using flutter_html\" /\u003e\n\n## Table of Contents:\n\n- [Supported HTML Tags](https://github.com/Sub6Resources/flutter_html/wiki/Supported-HTML-Elements)\n\n- [Supported CSS Attributes](https://github.com/Sub6Resources/flutter_html/wiki/Supported-CSS-Attributes)\n\n- [Why flutter_html?](#why-this-package)\n\n- [Migration Guide](#migration-guides)\n\n- [API Reference](#api-reference)\n\n  - [Constructors](#constructors)\n\n  - [Parameters Table](#parameters)\n  \n- [External Packages](#external-packages)\n  \n  - [`flutter_html_all`](#flutter_html_all)\n  \n  - [`flutter_html_audio`](#flutter_html_audio)\n  \n  - [`flutter_html_iframe`](#flutter_html_iframe)\n  \n  - [`flutter_html_math`](#flutter_html_math)\n  \n  - [`flutter_html_svg`](#flutter_html_svg)\n  \n  - [`flutter_html_table`](#flutter_html_table)\n\n  - [`flutter_html_video`](#flutter_html_video)\n  \n- [Frequently Asked Questions](#faq)\n\n- [Example](#example)\n\n\n## Why this package?\n\nThis package is designed with simplicity in mind. Originally created to allow basic rendering of HTML content into the Flutter widget tree,\nthis project has expanded to include support for basic styling as well! \n\nIf you need something more robust and customizable, the package also provides a number of extension APIs for extremely granular control over widget rendering!\n\n## Migration Guides\n\n[3.0.0 Migration Guide](https://github.com/Sub6Resources/flutter_html/wiki/Migration-Guides#300)\n\n## API Reference:\n\nFor the full API reference, see [here](https://pub.dev/documentation/flutter_html/latest/).\n\nFor a full example, see [here](https://github.com/Sub6Resources/flutter_html/tree/master/example).\n\nBelow, you will find brief descriptions of the parameters the`Html` widget accepts and some code snippets to help you use this package.\n\n### Constructors:\n\nThe package currently has two different constructors - `Html()` and `Html.fromDom()`. \n\nThe `Html()` constructor is for those who would like to directly pass HTML from the source to the package to be rendered. \n\nIf 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.\n\n### Parameters:\n\n| Parameters             | Description                                                                                                                                                                                         |\n|------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `data`                 | The HTML data passed to the `Html` widget. This is required and cannot be null when using `Html()`.                                                                                                 |\n| `document`             | The DOM document passed to the `Html` widget. This is required and cannot be null when using `Html.fromDom()`.                                                                                      |\n| `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.                          |\n| `extensions`           | Optional. A powerful API that allows you to customize everything when rendering a specific HTML tag.                                                                                                |\n| `shrinkWrap`           | Optional. A `bool` used while rendering different widgets to specify whether they should be shrink-wrapped or not, like `ContainerSpan`                                                             |\n| `onlyRenderTheseTags`  | Optional. An exclusive set of elements the `Html` widget should render. Note that your html will be wrapped in `\u003cbody\u003e` and `\u003chtml\u003e` if it isn't already, so you should include those in this list. |\n| `doNotRenderTheseTags` | Optional. A set of tags that should not be rendered by the `Html` widget.                                                                                                                           |\n| `style`                | Optional. A powerful API that allows you to customize the style that should be used when rendering a specific HTMl tag.                                                                             |\n\n\nMore examples and in-depth details are available:\n\n - [Style](https://github.com/Sub6Resources/flutter_html/wiki/How-To-Use-Style).\n - [HtmlExtension](https://github.com/Sub6Resources/flutter_html/wiki/How-To-Use-Extensions)\n\n## External Packages\n\n### `flutter_html_all`\n\nThis package is simply a convenience package that exports all the other external packages below. You should use this if you plan to render all the tags that require external dependencies.\n\n### `flutter_html_audio`\n\nThis package renders audio elements using the [`chewie_audio`](https://pub.dev/packages/chewie_audio) and the [`video_player`](https://pub.dev/packages/video_player) plugin.\n\nThe package considers the attributes `controls`, `loop`, `src`, `autoplay`, `width`, and `muted` when rendering the audio widget.\n\n#### Adding the `AudioHtmlExtension`:\n\nAdd the dependency to your pubspec.yaml:\n\n    flutter pub add flutter_html_audio\n\n```dart\nimport 'package:flutter_html_audio/flutter_html_audio.dart';\n\nWidget html = Html(\n  data: myHtml,\n  extensions: [\n    AudioHtmlExtension(),\n  ],\n);\n```\n\n### `flutter_html_iframe`\n\nThis package renders iframes using the [`webview_flutter`](https://pub.dev/packages/webview_flutter) plugin. \n\nWhen rendering iframes, the package considers the width, height, and sandbox attributes. \n\nSandbox controls the JavaScript mode of the webview - a value of `null` or `allow-scripts` will set `javascriptMode: JavascriptMode.unrestricted`, otherwise it will set `javascriptMode: JavascriptMode.disabled`.\n\n#### Adding the `IframeHtmlExtension`:\n\nAdd the dependency to your pubspec.yaml:\n\n    flutter pub add flutter_html_iframe\n\n```dart\nimport 'package:flutter_html_iframe/flutter_html_iframe.dart';\n\nWidget html = Html(\n  data: myHtml,\n  extensions: [\n    IframeHtmlExtension(),\n  ],\n);\n```\n\nYou can set the `navigationDelegate` of the webview with the `navigationDelegate` property on `IframeHtmlExtension`. This allows you to block or allow the loading of certain URLs.\n\n### `flutter_html_math`\n\nThis package renders MathML elements using the [`flutter_math_fork`](https://pub.dev/packages/flutter_math_fork) plugin.\n\nWhen rendering MathML, the package takes the MathML data within the `\u003cmath\u003e` tag and tries to parse it to Tex. Then, it will pass the parsed string to `flutter_math_fork`.\n\nBecause this package is parsing MathML to Tex, it may not support some functionalities. The current list of supported tags can be found [on the Wiki](https://github.com/Sub6Resources/flutter_html/wiki/First-Party-Extensions#flutter_html_math), but some of these only have partial support at the moment.\n\n#### Adding the `MathHtmlExtension`:\n\nAdd the dependency to your pubspec.yaml:\n\n    flutter pub add flutter_html_math\n\n```dart\nimport 'package:flutter_html_math/flutter_html_math.dart';\n\nWidget html = Html(\n  data: myHtml,\n  extensions: [\n    MathHtmlExtension(),\n  ],\n);\n```\n\nIf the parsing errors, you can use the `onMathErrorBuilder` property of `MathHtmlException` to catch the error and potentially fix it on your end.\n\nThe function exposes the parsed Tex `String`, as well as the error and error with type from `flutter_math_fork` as a `String`.\n\nYou can analyze the error and the parsed string, and finally return a new instance of `Math.tex()` with the corrected Tex string.\n\n#### Tex\n\nIf you have a Tex string you'd like to render inside your HTML you can do that using the same [`flutter_math_fork`](https://pub.dev/packages/flutter_math_fork) plugin.\n\nUse a custom tag inside your HTML (an example could be `\u003ctex\u003e`), and place your **raw** Tex string inside.\n \nThen, use the `extensions` parameter to add the widget to render Tex. It could look like this:\n\n```dart\nWidget htmlWidget = Html(\n  data: r\"\"\"\u003ctex\u003ei\\hbar\\frac{\\partial}{\\partial t}\\Psi(\\vec x,t) = -\\frac{\\hbar}{2m}\\nabla^2\\Psi(\\vec x,t)+ V(\\vec x)\\Psi(\\vec x,t)\u003c/tex\u003e\"\"\",\n  extensions: [\n    TagExtension(\n      tagsToExtend: {\"tex\"},\n      builder: (extensionContext) {\n        return Math.tex(\n          extensionContext.innerHtml,\n          mathStyle: MathStyle.display,\n          textStyle: extensionContext.styledElement?.style.generateTextStyle(),\n          onErrorFallback: (FlutterMathException e) {\n            //optionally try and correct the Tex string here\n            return Text(e.message);\n          },\n        );\n      }\n    ),\n  ],\n);\n```\n\n### `flutter_html_svg`\n\nThis package renders svg elements using the [`flutter_svg`](https://pub.dev/packages/flutter_svg) plugin.\n\nWhen rendering SVGs, the package takes the SVG data within the `\u003csvg\u003e` tag and passes it to `flutter_svg`. The `width` and `height` attributes are considered while rendering, if given.\n\nThe package also exposes a few ways to render SVGs within an `\u003cimg\u003e` tag, specifically base64 SVGs, asset SVGs, and network SVGs.\n\n#### Adding the `SvgHtmlExtension`:\n\nAdd the dependency to your pubspec.yaml:\n\n    flutter pub add flutter_html_svg\n\n```dart\nimport 'package:flutter_html_svg/flutter_html_svg.dart';\n\nWidget html = Html(\n  data: myHtml,\n  extensions: [\n    SvgHtmlExtension(),\n  ],\n);\n```\n\n### `flutter_html_table`\n\nThis package renders table elements using the [`flutter_layout_grid`](https://pub.dev/packages/flutter_layout_grid) plugin.\n\nWhen rendering table elements, the package tries to calculate the best fit for each element and size its cell accordingly. `Rowspan`s and `colspan`s are considered in this process, so cells that span across multiple rows and columns are rendered as expected. Heights are determined intrinsically to maintain an optimal aspect ratio for the cell.\n\n#### Adding the `TableHtmlExtension`:\n\nAdd the dependency to your pubspec.yaml:\n\n    flutter pub add flutter_html_table\n\n```dart\nimport 'package:flutter_html_table/flutter_html_table.dart';\n\nWidget html = Html(\n  data: myHtml,\n  extensions: [\n    TableHtmlExtension(),\n  ],\n);\n```\n\n### `flutter_html_video`\n\nThis package renders video elements using the [`chewie`](https://pub.dev/packages/chewie) and the [`video_player`](https://pub.dev/packages/video_player) plugin.\n\nThe package considers the attributes `controls`, `loop`, `src`, `autoplay`, `poster`, `width`, `height`, and `muted` when rendering the video widget.\n\n#### Adding the `VideoHtmlExtension`:\n\nAdd the dependency to your pubspec.yaml:\n\n    flutter pub add flutter_html_video\n\n```dart\nimport 'package:flutter_html_video/flutter_html_video.dart';\n\nWidget html = Html(\n  data: myHtml,\n  extensions: [\n    VideoHtmlExtension(),\n  ],\n);\n```\n\n## FAQ\n\n### Why can't I get `\u003caudio\u003e`/`\u003ciframe\u003e`/`\u003cmath\u003e`/`\u003csvg\u003e`/`\u003ctable\u003e`/\u003cvideo\u003e` to show up?\n\nHave you followed the instructions as described [above](#external-packages)?\n\nIf so, feel free to file an issue or start a discussion for some extra help.\n\n### How can I render `LaTex` in my HTML?\n\nSee the [above example](#tex).\n\n### How do I use this inside of a `Row()`?\n\nIf you'd like to use this widget inside of a `Row()`, make sure to set `shrinkWrap: true` and place your widget inside expanded:\n\n```dart\nWidget row = Row(\n   children: [\n        Expanded(\n            child: Html(\n              shrinkWrap: true,\n              //other params\n            )\n        ),\n\t    //whatever other widgets\n   ]\n);\n```\n\n## Example\n\nHere's what the example in example/lib/main.dart looks like after being run (in Chrome):\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/Sub6Resources/flutter_html/master/example/screenshots/flutter_html_screenshot.png\" alt=\"A screenshot showing the result of running the example\" /\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/Sub6Resources/flutter_html/master/example/screenshots/flutter_html_screenshot1.png\" alt=\"A second screenshot showing the result of running the example\" /\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/Sub6Resources/flutter_html/master/example/screenshots/flutter_html_screenshot2.png\" alt=\"A third screenshot showing the result of running the example\" /\u003e\u003c/td\u003e\n\u003ctd\u003e\u003cimg src=\"https://raw.githubusercontent.com/Sub6Resources/flutter_html/master/example/screenshots/flutter_html_screenshot3.png\" alt=\"A fourth screenshot showing the result of running the example\" /\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsub6resources%2Fflutter_html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsub6resources%2Fflutter_html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsub6resources%2Fflutter_html/lists"}