How to Display HTML in Flutter?

In this blog post, we’ll explore how to Display HTML in Flutter by using this package to display HTML content in your Flutter app, complete with error handling and loading indicators.

One common requirement in app development is displaying HTML content within a Flutter application. Fortunately, the flutter_widget_from_html_core package makes this task straightforward.

What is flutter_widget_from_html_core?

flutter_widget_from_html_core is a Flutter package that converts HTML content into Flutter widgets. It supports a wide range of HTML tags and provides customization options for rendering HTML content seamlessly within your app.

Installing the Package -Display HTML in Flutter

Before we dive into the code, let’s add the package to your Flutter project. Open your pubspec.yaml file and add the following dependency:

dependencies:
  flutter:
    sdk: flutter
  flutter_widget_from_html_core: ^0.8.4

Then, run flutter pub get to install the package.

Basic Usage – Display HTML in Flutter

The primary widget provided by the package is HtmlWidget. Let’s look at a basic example of using this widget to display a simple HTML paragraph.

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('HTML in Flutter'),
        ),
        body: HtmlWidget(
          '<p>this is description</p>',
          onErrorBuilder: (context, element, error) => Text('$element error: $error'),
          onLoadingBuilder: (context, element, loadingProgress) => Center(
            child: Image.asset(
              'assets/loading_icon.gif',
              width: 100,
              height: 100,
            ),
          ),
          renderMode: RenderMode.column,
        ),
      ),
    );
  }
}

Understanding the Code

Let’s break down the code snippet:

1. Importing Packages: We import the necessary packages, including flutter_widget_from_html_core.
2. Main Function: The main function initializes the app by calling runApp.
3. MyApp Widget: This is the root widget of our application. It contains a MaterialApp widget with a Scaffold that defines the basic visual structure.
4. HtmlWidget: Inside the body of the Scaffold, we use HtmlWidget to display the HTML content.

Output:

Handling Errors and Loading States

HtmlWidget supports various callback functions to handle errors and loading states. Here’s how we use them:

• onErrorBuilder: This callback is triggered if an error occurs while rendering an HTML element. It receives the context, the problematic element, and the error. In our example, it displays a Text widget with the error message.
• onLoadingBuilder: This callback is invoked while an element is being loaded. It receives the context, the element, and the loading progress. We use it to display a loading indicator (a GIF image in this case).

Render Modes

The renderMode parameter specifies how the HTML content should be rendered. In our example, we use RenderMode.column, which arranges elements in a vertical column. Other render modes include RenderMode.listView, which uses a ListView for scrolling content.

Customizing HTML Rendering

You can further customize how HTML elements are rendered using various parameters and properties provided by the package. Here are a few examples:

Styling

You can apply custom styles to HTML elements by wrapping them in a Style widget:

HtmlWidget(
  '<p style="color: blue; font-size: 20px;">this is a styled description</p>',
)

Handling Clicks

You can handle clicks on links by providing a custom onTapUrl callback:

HtmlWidget(
  '<a href="https://example.com">Click here</a>',
  onTapUrl: (url) {
    print('Clicked link: $url');
    return true;
  },
)

Also read:

• How to Wrap Text in Multiple Lines in Flutter?
• How to Create Flutter Horizontal Scroll in List?

Conclusion

Displaying HTML content in Flutter is made easy with the flutter_widget_from_html_core package. It provides a powerful and flexible way to render HTML, handle errors, and show loading indicators.

By following the examples in this post, you can quickly integrate HTML content into your Flutter app and customize its behavior to fit your needs.

For more information and advanced usage, refer to the official documentation.