How to Convert HTML as Custom Widget in Flutter
In this example, you will learn to display HTML Content as a flutter widget. We are going to use a flutter package to convert HTML into flutter widget and also do some actions with html content. You can interact with html like changing colors, action on clicking link or even you can build custom widget with your HTML Contents.
In this way, you can convert or show HTML as a widget in Flutter App. This can be very useful for showing Terms of Services or Privacy and Policy in your apps.
Flutter Widget from HTML
This is a Flutter package to render html as widgets that supports hyperlink, image, audio, video, iframe and also 70+ other tags. In one word, this package supports most common HTML tags for easy usage.
First of all, create a new project and run this command to add this to your app's pubspec.yaml file
flutter pub add flutter_widget_from_html
Basic of HTML Widget
This package is not work as web view. We can only show HTML content as flutter widget. Here is the use casesHtmlWidget(
// put your HTML Content inside ''' it's required
'''
<h3>Heading</h3>
<p>
A paragraph with <strong>strong</strong>, <em>emphasized</em>
and <span style="color: red">colored</span> text.
</p>
<!-- anything goes here -->
''',
// 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('widget-title')) {
return {'color': 'red'};
}
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),
)Applying to our own Project
We put our HTML content inside a String variable and used it on this project. Play with this code.
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html/flutter_widget_from_html.dart';
class HTMLtoWidget extends StatelessWidget{
final String htmlcode = """
<h1>H1 Title</h1>
<h2>H2 Title</h2>
<p>A paragraph with <strong>bold</strong> and <u>underline</u> text.</p>
<ol>
<li>List 1</li>
<li>List 2<ul>
<li>List 2.1 (nested)</li>
<li>List 2.2</li>
</ul>
</li>
<li>Three</li>
</ol>
<a href="https://www.orkitt.com">Orkitt.com Home</a>
<img src='https://picsum.photos/536/354'/>
""";
const HTMLtoWidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar:AppBar(title: const Text("HTML to Widget")),
body:SingleChildScrollView(
scrollDirection: Axis.vertical,
child:HtmlWidget( //to show HTML as widget.
htmlcode,
baseUrl: Uri.parse("https://www.orkitt.com"),
//baseURl (optional)
onTapUrl:(url) async {
print("Clicked url is $url");
//by default it shows app to open url.
//or you can do it in your own way
throw(e);
},
textStyle: const TextStyle(fontSize: 16),
),
),
);
}
}Output Screenshot
In this way, you can convert or show HTML as a widget in Flutter App. This can be very useful for showing Terms of Services or Privacy and Policy in your apps.