How to display an HTML asset file?

Question

I have an .html file in my assets directory.

How can I display / render it in Flutter?

Answer 1

The package from the Flutter Team was released yesterday:

webview_flutter

How to load local asset:

Add the file to the project and update your pubspec:

//...
assets:
    //...
    - assets/yourFile.html
    //...

---

In your widget:

child: FutureBuilder<String>(
  future: LocalLoader().loadLocal(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      //                                return Text("${snapshot.data}");
      return WebView(
        initialUrl: new Uri.dataFromString(snapshot.data,
                mimeType: 'text/html')
            .toString(),
        // maybe you Uri.dataFromString(snapshot.data, mimeType: 'text/html', encoding: Encoding.getByName("UTF-8")).toString()
        javascriptMode: JavascriptMode.unrestricted,
      );
    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }

    return CircularProgressIndicator();
  },
),

Loading the text from the file:

class LocalLoader {
  Future<String> loadLocal() async {
    return await rootBundle.loadString('assets/yourFile.html');
  }
}