Flutter html to widget

How to Convert/Show HTML as Widget in Flutter

In this example, you will learn to convert or show HTML markup as a widget in Flutter. We have used flutter_widget_from_html flutter package to convert HTML to the widget, and it also caches the images.

First, install flutter_widget_from_html Flutter package by adding the following line in your pubspec.yaml file. This package cached the network image in tag.

dependencies: flutter: sdk: flutter flutter_widget_from_html: ^0.3.3+3

Now see the code and do the same:

import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter_widget_from_html/flutter_widget_from_html.dart'; class HTMLtoWidget extends StatelessWidget< final String htmlcode = """ 
H1 Title
H2 Title
A paragraph with bold and underline text.

  
List 1
  
List 2 

  
List 2.1 (nested)
  
List 2.2


  
Three

Link to HelloHPC.com"""; @override Widget build(BuildContext context) < return Scaffold( appBar:AppBar(title: Text("HTML to Widget")), body:Container( child: Card( child:HtmlWidget( //to show HTML as widget. htmlcode, webView: true, bodyPadding: EdgeInsets.all(10), //body padding (Optional) baseUrl: Uri.parse("https://www.hellohpc.com"), //baseURl (optional) onTapUrl:(url)< print("Clicked url is $url"); //by default it shows app to open url. //or you can do it in your own way >), ) ), ); > >

Output Screenshot:

In this way, you can convert or show HTML as a widget in Flutter App.

Источник

flutter_widget_from_html 0.10.3

Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and many other tags.

Flutter Widget from HTML #

Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and 70+ other tags.

This package supports most common HTML tags for easy usage. If you don’t want to include all of its dependencies in your build, it’s possible to use flutter_widget_from_html_core with a subset of the mixins to control your app size:

• fwfh_cached_network_image for optimized image rendering
• fwfh_chewie for VIDEO support
• fwfh_just_audio for AUDIO support
• fwfh_svg for SVG support
• fwfh_url_launcher to launch URLs
• fwfh_webview for IFRAME support

Getting Started #

Add this to your app’s pubspec.yaml file:

dependencies: flutter_widget_from_html: ^0.10.3 

Platform specific configuration #

iOS

This package uses just_audio to play audio and this dependency uses a microphone API. By default, the App Store requires a usage description which can be skipped by editing your ios/Podfile . See the detailed instruction on its pub.dev page.

If you don’t need AUDIO tag support (e.g. your HTML never has that tag), it may be better to switch to the core package and use it with a subset of the mixins. See Extensibility for more details.

Usage #

Then you have to import the package with:

import 'package:flutter_widget_from_html/flutter_widget_from_html.dart'; 

And use HtmlWidget where appropriate:

HtmlWidget( // the first parameter (`html`) is required ''' 
Heading
 
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 ; > return null; >, // render a custom widget customWidgetBuilder: (element) < if (element.attributes['foo'] == 'bar') < return FooBarWidget(); >return null; >, // 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.

• A: underline, theme accent color
  • Scroll to anchor
  • Launch URL via url_launcher with base URL resolver
  • 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 attributes border , cellpadding , cellspacing
  • TD/TH attributes colspan , rowspan , valign

  These tags and their contents will be ignored:

  Attributes #

  Inline stylings #

  • background: 1 value (color)
    • background-color
    • border-top, border-right, border-bottom, border-left
    • border-block-start, border-block-end
    • border-inline-start, border-inline-end
    • 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
    • margin-top, margin-right, margin-bottom, margin-left
    • margin-block-start, margin-block-end
    • margin-inline-start, margin-inline-end
    • padding-top, padding-right, padding-bottom, padding-left
    • padding-block-start, padding-block-end
    • padding-inline-start, padding-inline-end
    • 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
    • width, max-width, min-width
    • height, max-height, min-height

    Источник