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.

Installation
Supported HTML Tags
Supported CSS Attributes
Parameters
Examples

Installation

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

Install the packages with

flutter pub get

Now in your dart code, you can import the package

import ‘package:flutter_html/flutter_html.dart’

Supported HTML Tags

abbr (2).png

Supported CSS Attributes

abbr (4).png

Parameters

abbr (3).png

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.

HTML to Flutter text widget

More from this blog

Pulling Your Own Weight

Why Choose RILearn Bootcamp for Skill Development: Unlocking Innovation and Tech Expertise

Thriving in the New Normal: Strategies for Tech Companies During an Economic Downturn

Looking for a Cowork Space in Port Harcourt? Why You Should Visit Ubuntu Space

Tech Innovations That Are Helping Women: How Technology is Empowering Women Around The World

Table of Contents

Installation

Supported HTML Tags

Supported CSS Attributes

Parameters

Conclusion

Command Palette

More from this blog

Table of Contents

Installation

Supported HTML Tags

Supported CSS Attributes

Parameters

Conclusion