How to render a local HTML file with flutter dart webview

by

I’m using the webview_flutter plugin from the Flutter Team.

Steps

  1. Add the dependency to pubspec.yaml:
dependencies:
  webview_flutter: ^4.2.1

  1. Put an html file in the assets folder (see this). I’ll call it help.html.

  2. Declare it in your pubspec.yaml file:

flutter:
  assets:
    - assets/help.html
  1. Use it in your code:
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

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

  @override
  State<HelpScreen> createState() => _HelpScreenState();
}

class _HelpScreenState extends State<HelpScreen> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController();
    _controller.loadFlutterAsset('assets/help.html');
  }

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

Notes

There are lots of other things you can do with a web view (including running JavaScript). Check out the following links for more:

Leave a Comment