A paragraph with strong, emphasized and colored text.
''', // all other parameters are optional, a few notable params: // specify custom styling for an element // see supported inline styling below customStylesBuilder: (element) { if (element.classes.contains('foo')) { return {'color': 'red'}; } return null; }, // render a custom widget customWidgetBuilder: (element) { if (element.attributes['foo'] == 'bar') { return FooBarWidget(); } return null; }, // turn on selectable if required (it's disabled by default) isSelectable: true, // these callbacks are called when a complicated element is loading // or failed to render allowing the app to render progress indicator // and fallback widget onErrorBuilder: (context, element, error) => Text('$element error: $error'), onLoadingBuilder: (context, element, loadingProgress) => CircularProgressIndicator(), // this callback will be triggered when user taps a link onTapUrl: (url) => print('tapped $url'), // select the render mode for HTML body // by default, a simple `Column` is rendered // consider using `ListView` or `SliverList` for better performance renderMode: RenderMode.column, // set the default styling for text textStyle: TextStyle(fontSize: 14), // turn on `webView` if you need IFRAME support (it's disabled by default) webView: true, ), ``` ## Features ### HTML tags Below tags are the ones that have special meaning / styling, all other tags will be parsed as text. [Compare between Flutter rendering and browser's.](https://demo.fwfh.dev/supported/tags.html) - A: underline, theme accent color - Scroll to anchor - Launch URL via [url_launcher](https://pub.dev/packages/url_launcher) with base URL resolver - AUDIO via [just_audio](https://pub.dev/packages/just_audio) - H1/H2/H3/H4/H5/H6 - IFRAME via [webview_flutter](https://pub.dev/packages/webview_flutter) - IMG with support for asset (`asset://`), data uri, local file (`file://`) and network image via [cached_network_image](https://pub.dev/packages/cached_network_image). Additional .svg file support via [flutter_svg](https://pub.dev/packages/flutter_svg). - LI/OL/UL with support for: - Attributes: `type`, `start`, `reversed` - Inline style `list-style-type` values: `lower-alpha`, `upper-alpha`, `lower-latin`, `upper-latin`, `circle`, `decimal`, `disc`, `lower-roman`, `upper-roman`, `square` - TABLE/CAPTION/THEAD/TBODY/TFOOT/TR/TD/TH with support for: - TABLE attributes `border`, `cellpadding`, `cellspacing` - TD/TH attributes `colspan`, `rowspan`, `valign` - SVG via [flutter_svg](https://pub.dev/packages/flutter_svg) - VIDEO via [chewie](https://pub.dev/packages/chewie) - ABBR, ACRONYM, ADDRESS, ARTICLE, ASIDE, B, BIG, BLOCKQUOTE, BR, CENTER, CITE, CODE, DD, DEL, DETAILS, DFN, DIV, DL, DT, EM, FIGCAPTION, FIGURE, FONT, FOOTER, HEADER, HR, I, INS, KBD, MAIN, MARK, NAV, NOSCRIPT, P, PRE, Q, RP, RT, RUBY, S, SAMP, SECTION, SMALL, STRIKE, STRONG, STYLE, SUB, SUMMARY, SUP, TT, U, VAR - Everything with screenshot: https://demo.fwfh.dev/supported/tags.html - [Try with fwfh.dev](https://try.fwfh.dev) These tags and their contents will be ignored: - SCRIPT - STYLE ### Attributes - align: center/end/justify/left/right/start/-moz-center/-webkit-center - dir: auto/ltr/rtl ### Inline stylings - background: 1 value (color) - background-color - border: 3 values (width style color), 2 values (width style) or 1 value (width) - border-top, border-right, border-bottom, border-left - border-block-start, border-block-end - border-inline-start, border-inline-end - border-radius: 4, 3, 2 or 1 values with slash support (e.g. `10px / 20px`) - border-top-left-radius: 2 values or 1 value in `em`, `pt` and `px` - border-top-right-radius: 2 values or 1 value in `em`, `pt` and `px` - border-bottom-right-radius: 2 values or 1 value in `em`, `pt` and `px` - border-bottom-left-radius: 2 values or 1 value in `em`, `pt` and `px` - box-sizing: border-box/content-box - color: hex values, `rgb()`, `hsl()` or named colors - direction (similar to `dir` attribute) - font-family - font-size: absolute (e.g. `xx-large`), relative (`larger`, `smaller`) or values in `em`, `%`, `pt` and `px` - font-style: italic/normal - font-weight: bold/normal/100..900 - line-height: `normal`, number or values in `em`, `%`, `pt` and `px` - margin: 4 values, 2 values or 1 value in `em`, `pt` and `px` - margin-top, margin-right, margin-bottom, margin-left - margin-block-start, margin-block-end - margin-inline-start, margin-inline-end - padding: 4 values, 2 values or 1 value in `em`, `pt` and `px` - padding-top, padding-right, padding-bottom, padding-left - padding-block-start, padding-block-end - padding-inline-start, padding-inline-end - vertical-align: baseline/top/bottom/middle/sub/super - text-align (similar to `align` attribute) - text-decoration - text-decoration-color - text-decoration-line: line-through/none/overline/underline - text-decoration-style: dotted/dashed/double/solid - text-decoration-thickness, text-decoration-width: values in `%` only - text-overflow: clip/ellipsis. Note: `text-overflow: ellipsis` should be used in conjuntion with `max-lines` or `-webkit-line-clamp` for better result. - white-space: normal/pre - Sizing: `auto` or values in `em`, `%`, `pt` and `px` - width, max-width, min-width - height, max-height, min-height ## Extensibility See [flutter_widget_from_html_core](https://pub.dev/packages/flutter_widget_from_html_core#extensibility) for details.