一、展示WebView（URL）

1、首先在pubspec.yaml文件中添加webview_flutter:这个三方库。

2、在.dart文件里导入所需文件名

import 'package:webview_flutter/webview_flutter.dart';

3、在initState方法里初始化controller（WebviewPageWithURL是我创建的用于接收URL来展示的网页类）
webView通过WebViewController来控制网页功能。

代码示例

4、创建WebViewWidget

代码示例

5、在需要展示webview的地方，调用getContentWebView()就可以了。

二、展示WebView（HTML）

上述代码都不变，只需要将..loadRequest()方法替换为..loadHtmlString()，并且把里面的代码改成html字符串就行了。

代码示例

三、flutter中与WebView交互

1、flutter读取H5内容：
（1）H5通过URL向flutter传递数据（通过setNavigationDelegate的NavigationDelegate）

代码示例

（2）通过定义特殊字段传递数据（通过添加JavaScriptChannel）

flutter中代码处理

H5中的定义：
keyButton.addEventListener('click', function () {
     //通过注册的key channel向flutter发送消息
     key.postMessage("value");
}, false)

2、flutter向H5传递数据
（1）拼接Url

代码示例

（2）使用runJavaScript方法传递
（比如点击flutter中一个按钮，调用sendMessageToH5()方法，在这方法里执行JS代码）

flutter中处理

H5中设置
<script type="text/javascript">
    function getParams(params) {
       document.getElementById('result').innerHTML = 'flutter传递的数据：' + params;
    }
    function getParamsCallBack(value) {
      return '处理结果'+value;
    }
</script>

⚠️ 通常我们会有点击空白处收起键盘的需求，实现代码是在main函数里添加以下代码

 // 全局 点击空白区域 收起键盘

return GestureDetector(
        onTap: () {
          FocusScopeNode currentFocus = FocusScope.of(context);
          if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
            FocusManager.instance.primaryFocus?.unfocus();
          }
        },
        onPanDown: (details) {
          FocusScopeNode currentFocus = FocusScope.of(context);
          if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
            FocusManager.instance.primaryFocus?.unfocus();
          }
        },
        child: GetMaterialApp(
           //。。。。。。
    );
  }

但在实际操作中，有时因为一些设置导致WebView无法滚动，原因是这个onPanDown手势处理把WebView的滚动手势也处理了，导致不响应。为了解决问题，需要去掉onPanDown这个处理器，并且设置behavior属性。这样依然可以保持点击空白部分收起键盘的功能。

 //全局 点击空白位置隐藏键盘
GestureDetector(
        behavior: HitTestBehavior.translucent,//更精准地识别手势
        onTap: () {
          FocusScopeNode currentFocus = FocusScope.of(context);
          if (!currentFocus.hasPrimaryFocus && currentFocus.focusedChild != null) {
            FocusManager.instance.primaryFocus?.unfocus();
          }
        },
        child: GetMaterialApp(
                 //......
          )
);

。