HTML to Flutter text widget

As a flutter developer, there are instances where the fields you get as response body when making an API call come as HTML tags (p, h1, ul, li, etc), when displaying to your frontend should be in regular text format.

No need to panic, there are ways to go around it.] There is a flutter package called flutter_html. This package helps in rendering HTML and CSS as flutter widgets.

Table of Contents

• Installation
• Supported HTML Tags
• Supported CSS Attributes
• Parameters
• Examples

Installation

1. To install this flutter_html package, visit pub.dev to get the latest version of the package. As of when this article is being published, the latest version is flutter_html: ^2.2.1

Add the following to your pubspec.yaml file:

dependencies:flutter_html: ^2.2.1

OR run this command on your terminal

flutter pub add flutter_html

1. Install the packages with

flutter pub get

1. Now in your dart code, you can import the package

import ‘package:flutter_html/flutter_html.dart’

Supported HTML Tags

Supported CSS Attributes

Parameters

Examples:

Html (
    data: “
<div>
    <h1>
    Test Example
    </h1>
    <p>
    Try out this example
    </p>
        <h3>
        Services
        </h3>
        <ul>
        <li>web development</li>
        <li>mobile development</li>
        <li>data security</li>
        <li>data management</li>
        </ul>
</div>
”
);

Let’s assume you are fetching your HTML data from an API, and the backend is returning to you dangerous HTML, you can use this method.

String description = “ ”;

HTML(
    Data: description,
    defaultTextStyle: TextStyle(
    Color: Colors.black,
    fontSize: 14;
    ),
);

Conclusion

Flutter is growing with its libraries and community. If there is a static HTML webpage that we want to render in our application, with this flutter_html package, we can render the entire webpage.

Keep the ball rolling and continue moving forward on your mobile development journey.