Flutter官方WebView不断增强，你们造吗

Flutter中比较流行的webview插件

使用flutter的webview已经有一段时间了，在flutter插件社区官网搜索webview即可搜索到比较流行的插件，如如下图：

image

---

也许目前比较流行的flutterwebview插件就是这三个了

• 1、webview_flutter
• 2、flutter_webview_plugin
• 3、interactive_webview

其中webview_flutter为官方维护的webview插件，特性是基于原生和Flutter SDK封装，继承StatefulWidget，因此支持内嵌于flutter Widget树中，这是比较灵活的；

flutter_webview_plugin则是基于原生WebView封装的Flutter插件，将原生的一些基本使用API封装好提供给Flutter调用，因此并不能内嵌于flutter Widget树中，因此在界面的跳转必须得先释放掉，返回后又要重新初始化，所以显示会有很多限制性；

interactive_webview则是基于webview_flutter封装的Flutter插件，因此原理特性上基本与官方webview一致的；

应该使用哪一个webview插件？

以前就对使用哪一个webview插件做了简单总结：

---

image

1、前段时间考虑到官方提供的webview插件还是开发者预览版，难免还有很多bug，加上也是因为某个bug而放弃使用webview_flutter，不得不切换成大部分人都在使用的比较流行的flutter_webview_plugin插件，但flutter_webview_plugin也有一些体验限制，因此原计划是等待官方webview修复某个bug后再切换回来。

2、据我了解在上周Flutter正式版1.7.8发布，新增了一些功能并且已经修复了不少bug，有兴趣的可查看如下地址：

https://github.com/flutter/flutter/wiki/Release-Notes-Flutter-1.7.8

Flutter1.7.8其中有一个就是修复了关于AndroidView聚焦问题，在此之前点击flutter_webview插件加载的网页的输入框无法弹出软键盘问题也因此修复了，对应issues如下：

https://github.com/flutter/flutter/issues/19718

这让我看到了希望，至少在体验上又前进了一大步，可喜可贺啊！

现在再回过头看看我之前的总结已经过时了，后面需要跟进下；

综上所述，webview_flutter某些bug已经修复，基本功能不断完善中，而flutter_webview_plugin插件由于其特性原因使用不灵活，最终我还是选择官方提供的webview_flutter作为加载网页的WebView插件。

使用

flutter插件地址：

https://pub.dev/packages/webview_flutter、
https://github.com/flutter/plugins/tree/master/packages/webview_flutter

• 1、将其添加到包的pubspec.yaml文件中：

#flutter官方webview
webview_flutter: ^0.3.10

• 2、import导入包：

import 'package:webview_flutter/webview_flutter.dart';

• 3、开始加载网页：

 ///初始化webview显示
  Widget _showWebView(BuildContext context) {
    return WebView(
      initialUrl: widget.url,///初始化url
      javascriptMode: JavascriptMode.unrestricted,///JS执行模式
      onWebViewCreated: (WebViewController webViewController) {///在WebView创建完成后调用，只会被调用一次
        //
        //
        _controller.complete(webViewController);
      },
      javascriptChannels: <JavascriptChannel>[///JS和Flutter通信的Channel；
        _alertJavascriptChannel(context),
      ].toSet(),
      navigationDelegate: (NavigationRequest request) {//路由委托（可以通过在此处拦截url实现JS调用Flutter部分）；
        ///通过拦截url来实现js与flutter交互
        if (request.url.startsWith('js://webview')) {
          Fluttertoast.showToast(msg:'JS调用了Flutter By navigationDelegate');
          print('blocking navigation to $request}');
          return NavigationDecision.prevent;///阻止路由替换，不能跳转，因为这是js交互给我们发送的消息
        }

        return NavigationDecision.navigate;///允许路由替换
      },
      onPageFinished: (String url) {///页面加载完成回调
        setState(() {
          _loading = false;
        });
        print('Page finished loading: $url');
      },

    );
  }

• 4、js交互：js调用Flutter方法
  （1）通过拦截url来实现js与flutter交互
  （2）JavascriptChannel方法

///js与flutter交互
  JavascriptChannel _alertJavascriptChannel(BuildContext context) {
    return JavascriptChannel(
        name: 'invoke',//invoke要和网页协商一致
        onMessageReceived: (JavascriptMessage message) {
          print(message.message);

        });
  }

• 5、js交互：Flutter调用js方法

///组合脚本执行方法，将数据发送给js端（flutter与js交互）
  void _onExecJavascript(String url) async {
    _controller.future.then((controller) {
      controller.loadUrl(url);
    });
    //或者 evaluateJavascript('callJS("js方法")')
  }

GitHub Demo地址：
https://github.com/ChessLuo/flutter_study_app

还有其他的基本使用方法和原生的使用方法大同小异就不再一一列举了，可以下载官方案例参考。

支持我的话可以关注下我的公众号，一起学习Android、小程序、跨平台开发~

image