How to render a local HTML file with flutter dart webview

Question

I want to render a local HTML file stored in my phone memory in webview using flutter and dart.

Answer 1

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

1. Add webview_flutter to your project dependencies:

   webview_flutter: 0.3.14+1

2. Create a WebViewController inside your screen/stateful widget

   WebViewController _controller;

3. 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);
        },
      )

4. Implement the function to load the file from the asset folder

    Future 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());
    }