How to render a local HTML file with flutter dart webview

Using the webview_flutter plugin in Flutter to render local HTML files is a common requirement, especially when loading local help documents or user agreements. The following are the steps to achieve this:

1. Add Dependencies

First, add the webview_flutter plugin as a dependency in your Flutter project's pubspec.yaml file:

yaml
dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^2.0.12

Then run flutter pub get to install the dependency.

2. Create Local HTML File

Create an HTML file in your project's assets directory, for example assets/help.html, and declare it in pubspec.yaml:

yaml
flutter:
  assets:
    - assets/help.html

3. Load Local HTML File in WebView

In Flutter, use the WebView widget to load local HTML files. Since WebView defaults to loading URLs, convert the HTML file content to a Data URL for local files.

Here is the code example:

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

class LocalHtmlWebView extends StatefulWidget {
  @override
  _LocalHtmlWebViewState createState() => _LocalHtmlWebViewState();
}

class _LocalHtmlWebViewState extends State<LocalHtmlWebView> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Local HTML in WebView'),
      ),
      body: FutureBuilder(
        future: DefaultAssetBundle.of(context).loadString('assets/help.html'),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            String fileText = snapshot.data;
            String contentBase64 = base64Encode(const Utf8Encoder().convert(fileText));
            return WebView(
              initialUrl: 'data:text/html;base64,$contentBase64',
              javascriptMode: JavascriptMode.unrestricted,
            );
          } else if (snapshot.hasError) {
            return Center(
              child: Text('Error loading the HTML file'),
            );
          } else {
            return Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

4. Test the Application

Run your Flutter application to verify that the WebView correctly loads the local HTML file. Ensure the HTML file is properly formatted and the asset path is correctly declared in pubspec.yaml.

Summary

Through these steps, you can use the webview_flutter plugin in your Flutter application to load and display local HTML files. This approach is ideal for static content like user guides or agreements. However, note that using Data URLs may not be suitable for very large HTML files, as base64 encoding increases memory usage and loading time.