[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