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

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(
  initialUrl: "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.