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.

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 cases

HtmlWidget(
  // 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.