推荐系列

Flutter（一） 安装部署与认识Dart语言

Flutter（二）Android集成Flutter项目并实现跳转到 Flutter 界面

Flutter（三）Flutter与Android原生Activity交互及传递​​数据  

Flutter（四）解决FlutterView显示黑屏卡顿问题

Flutter（五）Dio接口请求二次封装加Header及MD5加密

Flutter（六）Flutter界面中嵌入Android原生视图

---

一、WebView in Flutter

Flutter 本身并未集成webview，所以当需要使用本地webview 的时候，也就是使用的原生webview组件。在iOS上，WebView小部件是由WKWebView支持的;在Android上，WebView小部件是由WebView支持的。

目前，我们可以使用三种方式打开webview，分别是：

（1）flutter_webview_plugin

是基于原生 WebView 封装的 Flutter 插件，将原生的一些基本使用的 API， 封装好后提供给 Flutter 去调用。所以它是一个位于flutter视图之上的原生视图，就不能内嵌于 Flutter Widget 部件树中。

缺点：会有很多限制性。比如，视图显示方面（无法看到snackbar、对话框或其他与webview占用的屏幕区域重叠的小部件。）；需要在界面的跳转必须得先释放掉，返回后又要重新初始化，消耗性能资源。

（2）webview_flutter 

是基于原生和 Flutter SDK 封装，继承 StatefulWidget，因此支持内嵌于 flutter Widget 树中，这是比较灵活的。在2018年 Flutter 发展初期，官方的 webview_flutter 插件有很多问题，不过好在官方一直没有放弃，现在的插件已经修复了很多 bug 了，基本功能也在不断完善中。

（3）interactive_webview 

是基于 webview_flutter 封装的 Flutter 插件，因此原理上基本与官方 webview_flutter 一致的。 

---

（可跳过）

二、Flutter_webview_plugin 

1、添加依赖

插件地址：

https://pub.flutter-io.cn/packages/flutter_webview_plugin

pubspec.yaml :       

dependencies: flutter: sdk: flutter flutter_webview_plugin: ^0.3.11

packages get/update  （更新一下）

 

2、代码使用

return new MaterialApp( title: 'Flutter WebView Demo', theme: new ThemeData( primarySwatch: Colors.blue, ), routes: { '/': (_) => const MyHomePage(title: 'Flutter WebView Demo'), '/widget': (_) => new WebviewScaffold( url: selectedUrl, appBar: new AppBar( title: const Text('Widget webview'), ), withZoom: true, withLocalStorage: true, hidden: true, initialChild: Container( color: Colors.redAccent, child: const Center( child: Text('Waiting.....'), ), ), ), }, );

3、 web打不开异常

Execution failed for task ':flutter_webview_plugin:extractDebugAnnotations'. > Could not resolve all files for configuration ':flutter_webview_plugin:lintClassPath'.

...

flutter_webview_plugin 在使用过程中会iOS出现无法加载HTTP请求的情况， 但是Flutter 却可以加载HTTP请求。这就与两个的框架有关了，Flutter是独立于UIKit框架的。解决方案就是在iOS 的info.plist中添加对HTTP的信任。

IOS

路径：ios/Runner/Info.plist

<key>NSAppTransportSecurity</key> <dict> <key>NSAllowsArbitraryLoads</key> <true/> </dict>

---

安卓

 9.0之前的系统，使用过程中并未发生异常。 9.0之后，也不支持HTTP，同样也得添加信任。

第一步：在清单文件AndroidManifest.xml的application标签里面设置networkSecurityConfig属性如下:

android/app/src/main/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?> <manifest ... > <application android:networkSecurityConfig="@xml/network_security_config"> <!-- ... --> </application> </manifest>

第二步：在资源文件夹res/xml下面创建network_security_config.xml如下：

android/app/src/main/res/xml/network_security_config.xml

<?xml version="1.0" encoding="utf-8"?> <network-security-config> <base-config cleartextTrafficPermitted="true"> <trust-anchors> <certificates src="system" /> </trust-anchors> </base-config> </network-security-config>

---

三、webview_flutter

1、添加依赖

插件地址：

https://pub.flutter-io.cn/packages/webview_flutter

pubspec.yaml :       

dependencies: flutter: sdk: flutter webview_flutter: ^0.3.24

（如果你的flutter版本是最新的，可以使用1.0以上版本）

packages get/update  （更新一下）

 

2、代码使用

新建一个WebViewWidget 可接收两个参数，分别是页面标题和 Url

import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class Browser extends StatelessWidget { const Browser({Key key, this.url, this.title}) : super(key: key); final String url; final String title; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: WebView( initialUrl: url, javascriptMode: JavascriptMode.unrestricted, ), ); } } onPressed: () { Navigator.of(context) .push(new MaterialPageRoute(builder: (_) { return new Browser( url: "https://flutter-io.cn/", title: "Flutter 中文社区", ); })); }

 

另外，需要在 IOS 中的 Runner 中的 info.plist 文件中如下配置，不然这个 package 没办法在 iOS 设备上运行。

<key>io.flutter.embedded_views_preview</key> <string>YES</string>

 

四、踩坑笔记

1、Flutter Packages upgrade后任务进入阻塞状态

问题：无法更新下载插件库。

解决：配置flutter官方为中国搭建的镜像服务器，windows在环境变量中配置，配置好后重启Android Studio。 可参考：https://flutter.cn/community/china

PUB_HOSTED_URL=https://pub.flutter-io.cn FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

 

2、Flutter 多次点击闪电⚡️后，突然无法运行了

问题： 热更新太多次后，无法运行

解决：flutter缓存需要清理，命令输入：flutter clean  

 

3、Flutter 项目无法检测到移动设备

问题：可以看见AndroidStudio已经链接到设备，但是无法运行安装

解决：Adb 版本低，在AS-IDE里的，选择AndroidSDk-SDK Tools更新升级