I am using the webview_flutter plugin from the Flutter Team.
Steps
-
Add the dependency to pubspec.yaml:
dependencies: webview_flutter: ^0.3.20+2
-
Put an html file in the
assets
folder (see this). I’ll call ithelp.html
. -
Get the html string in code and add it to the webview.
import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:webview_flutter/webview_flutter.dart'; class HelpScreen extends StatefulWidget { @override HelpScreenState createState() { return HelpScreenState(); } } class HelpScreenState extends State<HelpScreen> { WebViewController _controller; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Help')), body: WebView( initialUrl: 'about:blank', onWebViewCreated: (WebViewController webViewController) { _controller = webViewController; _loadHtmlFromAssets(); }, ), ); } _loadHtmlFromAssets() async { String fileText = await rootBundle.loadString('assets/help.html'); _controller.loadUrl( Uri.dataFromString( fileText, mimeType: 'text/html', encoding: Encoding.getByName('utf-8') ).toString()); } }
Notes:
- I needed to set the encoding to UTF-8 because I was getting a crash for non-ASCII characters.
- In iOS you need to add the key
io.flutter.embedded_views_preview
astrue
in the Info.plist file. Check the docs for any update on this requirement.