Flutter 中使用WebView 之webview_flutter插件

ゞ浴缸里的玫瑰 2021-08-19 12:21 3356阅读 0赞

推荐系列

[Flutter（一） 安装部署与认识Dart语言][Flutter_ _Dart]

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

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

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

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

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

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fYWl5YW5n_size_16_color_FFFFFF_t_70][]

# 一、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][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][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][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更新升级

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fYWl5YW5n_size_16_color_FFFFFF_t_70 1][]

[Flutter_ _Dart]: https://blog.csdn.net/csdn_aiyang/article/details/102719078
[Flutter_Android_Flutter_ Flutter]: https://blog.csdn.net/csdn_aiyang/article/details/106840681
[Flutter_Flutter_Android_Activity]: https://blog.csdn.net/csdn_aiyang/article/details/106875108
[Flutter_FlutterView]: https://blog.csdn.net/csdn_aiyang/article/details/106898429
[Flutter_Dio_Header_MD5]: https://blog.csdn.net/csdn_aiyang/article/details/106996299
[Flutter_Flutter_Android]: https://blog.csdn.net/csdn_aiyang/article/details/107384493
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fYWl5YW5n_size_16_color_FFFFFF_t_70]: /images/20210802/8fb6d442e85c4368bafa8f7ae392a084.png
[https_pub.flutter-io.cn_packages_flutter_webview_plugin]: https://pub.flutter-io.cn/packages/flutter_webview_plugin#-installing-tab-
[https_pub.flutter-io.cn_packages_webview_flutter]: https://pub.flutter-io.cn/packages/webview_flutter
[https_flutter.cn_community_china]: https://flutter.cn/community/china
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NzZG5fYWl5YW5n_size_16_color_FFFFFF_t_70 1]: /images/20210802/5ce20172ffc446009bb8b3587bdc26ec.png