Flutter的webview常用的第三方库有flutter_webview_plugin、webview_flutter,后者的文档较少,暂先学习flutter_webview_plugin。
一、flutter_webview_plugin
添加依赖
flutter_webview_plugin: ^0.3.0
导入包
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
iOS端info.plist配置,其中NSAppTransportSecurity节点是为了支持http协议
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
一个简单的demo
new MaterialApp(
routes: {
"/": (_) => new WebviewScaffold(
url: "https://www.baidu.com",
appBar: new AppBar(
title: new Text("Widget webview"),
),
),
},
);
要监听链接跳转的话,实现onUrlChanged即可
final _urlCtrl = TextEditingController(text: selectedUrl);
@override
void initState() {
super.initState();
...
_urlCtrl.addListener(() {
selectedUrl = _urlCtrl.text;
});
// Add a listener to on url changed
_onUrlChanged = flutterWebViewPlugin.onUrlChanged.listen((String url) {
if (mounted) {
setState(() {
//这里拦截url变化,可以实现点击号码拨号
_history.add('onUrlChanged: $url');
if(url.startsWith('tel:')){
print(url);
launch(url);
}
});
}
});
}
二、webview_flutter
添加依赖
webview_flutter: ^0.3.3+1
导入包
import 'package:webview_flutter/webview_flutter.dart';
iOS端info.plist配置
<key>io.flutter.embedded_views_preview</key>
<true/>
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
一个简单的demo
return WebView(
initialUrl: 'https://www.baidu.com',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
// TODO(iskakaushik): Remove this when collection literals makes it to stable.
// ignore: prefer_collection_literals
);
但是在webview里点击链接跳转的时候,测试机有时会跳转到系统浏览器上,并且点击文本框无法弹出键盘,交互性很弱。
二者共同的缺点是与javascript难以交互,目前只能实现Flutter->JS传递信息,还没找到可以进行完美交互的第三方库。并且一些常见的协议还不支持,比如拨号和调用摄像头等,期待后续完善。