How to render a local HTML file with flutter dart webview

Solution 1:

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 it help.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 as true in the Info.plist file. Check the docs for any update on this requirement.

Solution 2:

You can pass a data URI

Uri.dataFromString('<html><body>hello world</body></html>', mimeType: 'text/html').toString()

or you can launch a web server inside Flutter and pass an URL that points to the IP/port the server serves the file from.

See also the discussion in https://github.com/fluttercommunity/flutter_webview_plugin/issues/23

See https://flutter.io/docs/development/ui/assets-and-images#loading-text-assets about how to load a string from assets.

See https://flutter.io/docs/cookbook/persistence/reading-writing-files for how to read other files.

Solution 3:

@Suragch, your code doesn't work as you posted it, it says localUrl was called on null. _loadHtmlFromAssets needs to be called after assigning the controller :

onWebViewCreated: (WebViewController webViewController) {
  _controller = webViewController;
  _loadHtmlFromAssets();
}

Then it works fine :)

Solution 4:

You may use Flutter InAppWebView Plugin. It will create a local server inside the app and it’ll run the HTML app there in the WebView. Start your server:

InAppLocalhostServer localhostServer = new InAppLocalhostServer();

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await localhostServer.start();
  runApp(new MyApp());
}

//... ...

class _MyHomePageState extends State < MyHomePage > {

//... ...

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

And then point your localhost html index file in the WebView.

InAppWebView(
  initialUrlRequest: URLRequest(
          url: Uri.parse('http://localhost:8080/assets/index.html')),
),

In many cases it doesn't work for many people because they forget to add all the folders as the assets in the pubspec.yaml file. For example, you need to specify all the folders and index file like below:

  assets:
    - assets/index.html
    - assets/css/
    - assets/images/
    - assets/js/
    - assets/others/

You can see this tutorial for further details.

Solution 5:

I have the same problem; this is how I solved it.

Add webview_flutter to your project dependencies:

webview_flutter: 0.3.14+1
Create a WebViewController inside your screen/stateful widget

WebViewController _controller;
Implement the WebView and assign a value to the _controller using the onWebViewCreated property. Load the HTML file.

    WebView(
        initialUrl: '',
        onWebViewCreated: (WebViewController webViewController) async {
          _controller = webViewController;
          await loadHtmlFromAssets('legal/privacy_policy.html', _controller);
        },
      )

Implement the function to load the file from the asset folder

    Future<void> loadHtmlFromAssets(String filename, controller) async {
        String fileText = await rootBundle.loadString(filename);
        controller.loadUrl(Uri.dataFromString(fileText, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString());
    }