通过webview 进行flutter 和js 的互调，页面可以放在其他网站 也可以放在本地，我这里放在本地进行测试。
1.引入webview_flutter: ^0.3.5+2 这个是官网推荐用的， 还有一个好像api 里没有互调的操作。
onWebViewCreated：在WebView创建完成后调用，只会被调用一次；initialUrl：初始load的url；javascriptMode：JS执行模式（是否允许JS执行）；javascriptChannels：JS和Flutter通信的Channel；navigationDelegate：路由委托（可以通过在此处拦截url实现JS调用Flutter部分）；gestureRecognizers：手势监听；onPageFinished：WebView加载完毕时的回调。import ‘dart:async‘;js 调用flutter 有俩种方式
1.使用javascriptChannels
js部分：
<button onclick="callFlutter()">callFlutter</button>
function callFlutter(){
Toast.postMessage("JS调用了Flutter"); // 使用postMessage toast 是定义好的名称，在接受的时候要拿这个name 去接受
}
flutter部分：
javascriptChannels: <JavascriptChannel>[ //javascriptChannels这个是api提供的互调的方法，
_alertJavascriptChannel(context),
].toSet(),
JavascriptChannel _alertJavascriptChannel(BuildContext context) {
return JavascriptChannel(
name: ‘Toast‘,
onMessageReceived: (JavascriptMessage message) {
showToast(message.message);
});
}
第二种方法：通过navigationDelegate拦截url
document.location = "js://webview?arg1=111&args2=222"; 通过跳转链接 js：/webview 这个定义好之后
navigationDelegate: (NavigationRequest request) {
if (request.url.startsWith(‘js://webview‘)) { //拦截以js://webview 开始的链接 说明页面执行了这个链接的跳转操作，也就是页面按钮被点击了。那么执行相关的flutter操作。
showToast(‘JS调用了Flutter By navigationDelegate‘);
print(‘blocking navigation to $request}‘);
Navigator.push(context,
new MaterialPageRoute(builder: (context) => new testNav()));
return NavigationDecision.prevent;
}
print(‘allowing navigation to $request‘);
return NavigationDecision.navigate; //这个是必须有的，NavigationDecision.prevent：阻止路由替换；NavigationDecision.navigate：允许路由替换。
},
flutter调用js：
_controller.future.then((controller) {
controller.evaluateJavascript(‘callJS("visible")‘) //参数 是要调用的js 函数名
.then((result) {
print(result);
});
});
function callJS(message){ document.getElementById("p1").style.visibility = message; } //控制div 的显示以及隐藏。
原文：https://www.cnblogs.com/wupeng88/p/11095992.html