HTML to Flutter text widget
2 min read
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
- Supported HTML Tags
- Supported CSS Attributes
- 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
Add the following to your pubspec.yaml file:
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
Supported HTML Tags
Supported CSS Attributes
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; ), );
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.