[003]flutter webview加载h5

webview_flutter library：https://pub.dev/packages/webview_flutter

A Flutter plugin that provides a WebView widget.

On iOS the WebView widget is backed by a WKWebView; 
On Android the WebView widget is backed by a WebView.

一个提供WebView小部件的Flutter插件。
在iOS上，WebView小部件由WKWebView支持;
在Android上，WebView小部件由WebView支持。

1.依赖

在pubspec.yaml文件中添加依赖webview_flutter: ^0.3.10+2

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  webview_flutter: ^0.3.10+2

2. 安装

// 运行如下命令
$ flutter pub get

3. 配置权限

• 1、IOS[未验证：来自网络]

需要在Info.plist中添加io.flutter.embedded_views_preview

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

• 2、Android

需要在AndroidManifest.xml中添加网络权限

<uses-permission android:name="android.permission.INTERNET" />

4. 导入包

import 'package:webview_flutter/webview_flutter.dart';

5. 使用webview加载

// new version
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() => runApp(new ECardApp());

class ECardApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'ecard',
      theme: new ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: new HomeWidget(),
    );
  }
}

class HomeWidget extends StatelessWidget {
 @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text('加载网络h5'),
      ),
      body: new WebView(
        initialUrl: 'h5 Url/',
      ),
    );
  }
}

6.run，ok

---

异常处理

IOS出现无法加载http请求的情况，Android在9.0之后也不支持http，所以需要添加信任。

1、IOS

info.plist中添加对HTTP的信任

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

2、Android

• 2.1、清单文件AndroidManifest.xml的application标签里面设置networkSecurityConfig

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

• 2.2、在资源文件夹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>

---

todo

• 缓存处理
• 监听加载状态
• flutter和原生app交互
• 滑动监听

原文链接：flutter webview加载h5