[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9278":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":19,"rankGlobal":10,"rankLanguage":10,"license":20,"archived":21,"fork":21,"defaultBranch":22,"hasWiki":23,"hasPages":21,"topics":24,"createdAt":10,"pushedAt":10,"updatedAt":33,"readmeContent":34,"aiSummary":35,"trendingCount":16,"starSnapshotCount":16,"syncStatus":18,"lastSyncTime":36,"discoverSource":37},9278,"flutter_html","Sub6Resources\u002Fflutter_html","Sub6Resources","A Flutter widget for rendering static html as Flutter widgets (Will render over 80 different html tags!)","https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_html",null,"Dart",1891,931,27,142,0,1,2,21.91,"MIT License",false,"master",true,[25,26,27,28,29,30,31,32],"flutter","flutter-html","flutter-package","flutter-widget","flutter-widgets","html-css","html-parser","html-tags","2026-06-12 02:02:05","# flutter_html\n[![pub package](https:\u002F\u002Fimg.shields.io\u002Fpub\u002Fv\u002Fflutter_html.svg)](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_html)\n[![codecov](https:\u002F\u002Fcodecov.io\u002Fgh\u002FSub6Resources\u002Fflutter_html\u002Fbranch\u002Fmaster\u002Fgraph\u002Fbadge.svg)](https:\u002F\u002Fcodecov.io\u002Fgh\u002FSub6Resources\u002Fflutter_html)\n[![GitHub Actions](https:\u002F\u002Fgithub.com\u002FSub6Resources\u002Fflutter_html\u002Factions\u002Fworkflows\u002Ftest.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002FSub6Resources\u002Fflutter_html\u002Factions)\n[![MIT License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-blue.svg?style=flat)](https:\u002F\u002Fgithub.com\u002FSub6Resources\u002Fflutter_html\u002Fblob\u002Fmaster\u002FLICENSE)\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>Hello, World!\u003C\u002Fh1>\n        \u003Cp>\u003Cspan style=\"font-style:italic;\">flutter_html\u003C\u002Fspan> supports a variety of HTML and CSS tags and attributes.\u003C\u002Fp>\n        \u003Cp>Over a hundred static tags are supported out of the box.\u003C\u002Fp>\n        \u003Cp>Or you can even define your own using an \u003Ccode>Extension\u003C\u002Fcode>: \u003Cflutter>\u003C\u002Fflutter>\u003C\u002Fp>\n        \u003Cp>Its easy to add custom styles to your Html as well using the \u003Ccode>Style\u003C\u002Fcode> class:\u003C\u002Fp>\n        \u003Cp class=\"fancy\">Here's a fancy <p> element!\u003C\u002Fp>\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:\u002F\u002Fraw.githubusercontent.com\u002FSub6Resources\u002Fflutter_html\u002Fmaster\u002Fexample\u002Fscreenshots\u002Fflutter_html_readme_screenshot.png\" alt=\"A screenshot showing the above code snippet rendered using flutter_html\" \u002F>\n\n## Table of Contents:\n\n- [Supported HTML Tags](https:\u002F\u002Fgithub.com\u002FSub6Resources\u002Fflutter_html\u002Fwiki\u002FSupported-HTML-Elements)\n\n- [Supported CSS Attributes](https:\u002F\u002Fgithub.com\u002FSub6Resources\u002Fflutter_html\u002Fwiki\u002FSupported-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:\u002F\u002Fgithub.com\u002FSub6Resources\u002Fflutter_html\u002Fwiki\u002FMigration-Guides#300)\n\n## API Reference:\n\nFor the full API reference, see [here](https:\u002F\u002Fpub.dev\u002Fdocumentation\u002Fflutter_html\u002Flatest\u002F).\n\nFor a full example, see [here](https:\u002F\u002Fgithub.com\u002FSub6Resources\u002Fflutter_html\u002Ftree\u002Fmaster\u002Fexample).\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>` and `\u003Chtml>` 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:\u002F\u002Fgithub.com\u002FSub6Resources\u002Fflutter_html\u002Fwiki\u002FHow-To-Use-Style).\n - [HtmlExtension](https:\u002F\u002Fgithub.com\u002FSub6Resources\u002Fflutter_html\u002Fwiki\u002FHow-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:\u002F\u002Fpub.dev\u002Fpackages\u002Fchewie_audio) and the [`video_player`](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fvideo_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\u002Fflutter_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:\u002F\u002Fpub.dev\u002Fpackages\u002Fwebview_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\u002Fflutter_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:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_math_fork) plugin.\n\nWhen rendering MathML, the package takes the MathML data within the `\u003Cmath>` 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:\u002F\u002Fgithub.com\u002FSub6Resources\u002Fflutter_html\u002Fwiki\u002FFirst-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\u002Fflutter_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:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_math_fork) plugin.\n\nUse a custom tag inside your HTML (an example could be `\u003Ctex>`), 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>i\\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\u002Ftex>\"\"\",\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            \u002F\u002Foptionally 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:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_svg) plugin.\n\nWhen rendering SVGs, the package takes the SVG data within the `\u003Csvg>` 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>` 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\u002Fflutter_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:\u002F\u002Fpub.dev\u002Fpackages\u002Fflutter_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\u002Fflutter_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:\u002F\u002Fpub.dev\u002Fpackages\u002Fchewie) and the [`video_player`](https:\u002F\u002Fpub.dev\u002Fpackages\u002Fvideo_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\u002Fflutter_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>`\u002F`\u003Ciframe>`\u002F`\u003Cmath>`\u002F`\u003Csvg>`\u002F`\u003Ctable>`\u002F\u003Cvideo>` 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              \u002F\u002Fother params\n            )\n        ),\n\t    \u002F\u002Fwhatever other widgets\n   ]\n);\n```\n\n## Example\n\nHere's what the example in example\u002Flib\u002Fmain.dart looks like after being run (in Chrome):\n\n\u003Ctable>\n\u003Ctr>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FSub6Resources\u002Fflutter_html\u002Fmaster\u002Fexample\u002Fscreenshots\u002Fflutter_html_screenshot.png\" alt=\"A screenshot showing the result of running the example\" \u002F>\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FSub6Resources\u002Fflutter_html\u002Fmaster\u002Fexample\u002Fscreenshots\u002Fflutter_html_screenshot1.png\" alt=\"A second screenshot showing the result of running the example\" \u002F>\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FSub6Resources\u002Fflutter_html\u002Fmaster\u002Fexample\u002Fscreenshots\u002Fflutter_html_screenshot2.png\" alt=\"A third screenshot showing the result of running the example\" \u002F>\u003C\u002Ftd>\n\u003Ctd>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FSub6Resources\u002Fflutter_html\u002Fmaster\u002Fexample\u002Fscreenshots\u002Fflutter_html_screenshot3.png\" alt=\"A fourth screenshot showing the result of running the example\" \u002F>\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n","flutter_html 是一个用于将静态 HTML 渲染为 Flutter 组件的插件，支持超过 80 种不同的 HTML 标签。它通过解析 HTML 和 CSS 代码，并将其转换成对应的 Flutter UI 元素来实现这一功能，同时允许开发者自定义扩展标签和样式以满足特定需求。此项目非常适合需要在 Flutter 应用中展示富文本内容的场景，比如博客、新闻阅读器或任何包含格式化文本的应用程序。基于 Dart 语言开发，遵循 MIT 许可证开放源码，拥有活跃的社区支持和丰富的文档资源。","2026-06-11 03:22:00","top_language"]