# 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](https://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
```
2. Install the packages with

```
flutter pub get
```

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

```
import ‘package:flutter_html/flutter_html.dart’
```

### Supported HTML Tags

![abbr (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666704421537/e3CDuN-6d.png align="left")

### Supported CSS Attributes

![abbr (4).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666708610582/jtFTA-G0U.png align="left")

### Parameters


![abbr (3).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666708701435/kCzBlkO8e.png align="left")

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.