How to display an HTML asset file?

问题:

I have an .html file in my assets directory.

How can I display / render it in Flutter?

回答1:

You can use the flutter_webview_plugin this should work with local files too.

It works both on Android and iOS

Dart

var flutterWebviewPlugin = new FlutterWebviewPlugin();

flutterWebviewPlugin.launch("https://flutter.io");
await flutterWebviewPlugin.onDestroy.first;

Android Manifest

<activity android:name="com.flutter_webview_plugin.WebviewActivity"
                  android:parentActivityName=".MainActivity"/>

回答2:

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');
  }
}

回答3:

You can try my flutter_inappbrowser plugin, that is a Flutter Plugin that allows you to add an inline webview integrated with the widget tree or open an in-app browser window!

You can use the InAppWebView widget class or the InAppBrowser class and use its webview controller.

About InAppWebView: At this moment, inline webview is available only for Android and has some limitation because AndroidView is not stable enough. However, it has a lot of methods and events that you can already test and use. For iOS, it will be available as soon as the Flutter team will release the corresponding dart class.

In your case, you can use the InAppWebViewController.loadFile method.

To be able to load your local files (html, js, css, etc.), you need to add them in the assets section of the pubspec.yaml file, otherwise they cannot be found!

Example of a pubspec.yaml file:

...

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

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

...

Then, call the method in your business logic:

...

inAppWebViewController.loadFile("assets/index.html");

...

回答4:

If you just need to render simple HTML tags (p,img,a,h1,etc.) you could try this flutter_html plugin

It's not mature enough for production yet IMHO but worth considering / contributing.

回答5:

To render HTML tags like() use this plugin flutter_html

also you can use this plugin open_file to open files