我想使用flutter和dart在webview中呈现存储在手机内存中的本地HTML文件。
这是一个更详细的答案。我正在使用Flutter团队的webview_flutter插件。
dependencies:
webview_flutter: ^0.3.4
assets文件夹中（参见this）。我称之为help.html。import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';
class HelpScreen extends StatefulWidget {
@override
HelpScreenState createState() {
return HelpScreenState();
}
}
class HelpScreenState extends State<HelpScreen> {
WebViewController _controller;
@override
Widget build(BuildContext context) {
_loadHtmlFromAssets();
return Scaffold(
appBar: AppBar(title: Text('Help')),
body: WebView(
initialUrl: '',
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
},
),
);
}
_loadHtmlFromAssets() async {
String fileText = await rootBundle.loadString('assets/help.html');
_controller.loadUrl( Uri.dataFromString(
fileText,
mimeType: 'text/html',
encoding: Encoding.getByName('utf-8')
).toString());
}
}
initialUrl设置为空字符串（null导致异常）。我不知道这是否是标准做法，但似乎有效。io.flutter.embedded_views_preview添加为true。检查docs有关此要求的任何更新。您可以传递数据URI
Uri.dataFromString('<html><body>hello world</body></html>', mimeType: 'text/html').toString()
或者您可以在Flutter中启动Web服务器并传递指向服务器为其提供文件的IP /端口的URL。
另见https://github.com/fluttercommunity/flutter_webview_plugin/issues/23中的讨论
请参阅https://flutter.io/docs/development/ui/assets-and-images#loading-text-assets，了解如何从资产中加载字符串。
有关如何阅读其他文件，请参阅https://flutter.io/docs/cookbook/persistence/reading-writing-files。
@Suragch，你的代码不像你发布的那样工作，它说localUrl是在null上调用的。分配控制器后需要调用_loadHtmlFromAssets：
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
_loadHtmlFromAssets();
}
然后它工作正常:)