如何显示HTML资产文件？

Question

我的资产目录中有一个.html文件。

如何在Flutter中显示/渲染它？

Answer 1

Flutter 团队昨天发布的包：

webview_flutter

如何加载本地资产：

将文件添加到项目并更新您的 pubspec：

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

在您的小部件中：

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

从文件加载文本：

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

Answer 2

您可以使用flutter_webview_plugin，它也应适用于本地文件。

它可以在Android和iOS上运行

镖

var flutterWebviewPlugin = new FlutterWebviewPlugin();

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

Android清单

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