Flutter HTML

Flutter HTML

Posted on by Toma Velev

Here are some examples of rendering HTML in Flutter using different packages – depending on the platforms you are going to target your apps.

1. HtmlElementView Class

The HtmlElementView widget is build-in component, but it is meant to be used on the Web Platform. It may suite your needs if you only going to target the Internet and not the Mobile nor the Desktop Platforms.

You could nicely set any HTMl Element inside a Flutter Web App, even with some HTMl attributes like:

const HtmlElementView(
  viewType: 'iframe',
  creationParams: <String, Object?>{
    'src' : 'https://example.com/example.html',
  },
)

2. WebViewFlutter

You can use the webview_flutter package to render HTML from some remote web page. Here’s an example:

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

class TermsAndServicesScreen extends StatefulWidget {
  const TermsAndServicesScreen({super.key});

  @override
  State<TermsAndServicesScreen> createState() => _TermsAndServicesScreenState();
}

class _TermsAndServicesScreenState extends State<TermsAndServicesScreen> {
  late final WebViewController _controller;

  @override
  void initState() {
    _controller = WebViewController();
    _controller.loadRequest(Uri.parse("https://example.com/example.html"));
    super.initState();
  }

  @override
  void dispose() {
    _controller.clearCache();
    _controller.clearLocalStorage();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        body: WebViewWidget(
          controller: _controller,
        ),
      );
}

Be preprated to have Responsive HTML. Something minimal like:

<!doctype html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body> ..... </body></html>
Otherwise the content may get supper small and unreadable.

3. Flutter Widget From Html

You can use the flutter_widget_from_html package to render HTML in your Flutter app. Here’s an example:

class TermsAndServicesScreen extends StatefulWidget {
  const TermsAndServicesScreen({super.key});

  @override
  State<TermsAndServicesScreen> createState() => _TermsAndServicesScreenState();
}

class _TermsAndServicesScreenState extends State<TermsAndServicesScreen> {
  String html = "";

  @override
  void initState() {
    super.initState();
    _load();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        body: Scrollbar(child: SingleChildScrollView(child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: HtmlWidget(html),
        ))),
      );

  void _load() {
    var uri = (Uri.parse("https://example.com/example.html"));
    http.get(uri).then(
      (value) {
        setState(() {
          html = value.body;
        });
      },
    );
  }
}

This package provides a HtmlWidget widget that can render HTML from a string. You can customize the rendering by passing different options to the HtmlWidget constructor.

The choice of package depends on your specific requirements and the complexity of the HTML you need to render. I’ll be using one of these solutions in an incoming app that will be available here https://programtom.com/dev/product-category/technologies/flutter-apps/?orderby=date