Flutter Render HTML Code In App

Hello friends, HTML is one of the oldest and famous markup language in technical area. It is used to design web pages which displays on web browsers as websites. Full form of HTML is Hyper text markup language. Sometimes we want to display a simple HTML content on a flutter app but we cannot. Because flutter does not support HTML. But using custom package flutter_widget_from_html_core we can do this. All we need to do is write our HTML code and call the code in this widget and then the magic happens.

Flutter Render HTML Code In App:

1. Open your flutter project directory in Terminal and execute below command to install the flutter_widget_from_html_core package.

flutter pub add flutter_widget_from_html_core

Screenshot of terminal:

2. Open your flutter project's main.dart file and import material.dart and flutter_widget_from_html_core.dart package.

import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';

3. Creating a final variable htmlCode with your HTML code which you want to render in flutter app.

final htmlCode = """<div>
  <h1>This is Heading H1</h1>
  <h2>This is Heading H2</h2>
  <h3>This is Heading H3</h3>
  <p>Sample Paragraph Text.</p>
  <div>
    <h1>Heading Tag Inside DIV</h1>
    <p><strong>Bold Text</strong> in HTML.</p>
    <p style="color: red">Below is List View in HTML</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
    <p>Img tag in HTML for Showing Image</p>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYNSWovS91U5EyeIG-SILt_votSAbPM8ZfFubEZC_Wb-zCL5a9YP-qigWiJs3Bjle45KwIEc_Jhxb9HA_UzH0WLAtaRXKiPRrUrlIURgwfIoex4qfcEed839tE3aLl2yBrK1uHNCyGjdkEM6oEUUCyhYmMEhuuCYlhj_FHBdG8hr97otfM_GGKriiF6qxA/s16000/flutter-app.png' />
  </div>
  </div>""";

4. Defining HtmlWidget within SingleChildScrollView to enable scrolling and pass htmlCode in it.

SingleChildScrollView(
      child: HtmlWidget(
        htmlCode,
        onErrorBuilder: (context, element, error) =>
            Text('$element error: $error'),
        onLoadingBuilder: (context, element, loadingProgress) =>
            const CircularProgressIndicator(),
        // onTapUrl: (url) => print('tapped $url'),
        renderMode: RenderMode.column,
      ),
    )

5. Complete source code for main.dart file:

import 'package:flutter/material.dart';
import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  final htmlCode = """<div>
  <h1>This is Heading H1</h1>
  <h2>This is Heading H2</h2>
  <h3>This is Heading H3</h3>
  <p>Sample Paragraph Text.</p>
  <div>
    <h1>Heading Tag Inside DIV</h1>
    <p><strong>Bold Text</strong> in HTML.</p>
    <p style="color: red">Below is List View in HTML</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
    <p>Img tag in HTML for Showing Image</p>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYNSWovS91U5EyeIG-SILt_votSAbPM8ZfFubEZC_Wb-zCL5a9YP-qigWiJs3Bjle45KwIEc_Jhxb9HA_UzH0WLAtaRXKiPRrUrlIURgwfIoex4qfcEed839tE3aLl2yBrK1uHNCyGjdkEM6oEUUCyhYmMEhuuCYlhj_FHBdG8hr97otfM_GGKriiF6qxA/s16000/flutter-app.png' />
  </div>
  </div>""";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: SingleChildScrollView(
      child: HtmlWidget(
        htmlCode,
        onErrorBuilder: (context, element, error) =>
            Text('$element error: $error'),
        onLoadingBuilder: (context, element, loadingProgress) =>
            const CircularProgressIndicator(),
        // onTapUrl: (url) => print('tapped $url'),
        renderMode: RenderMode.column,
      ),
    ))));
  }
}

Screenshot: