FlutterでWebView / In-App Browser

# FlutterでWebViewを使う
FlutterではなぜかデフォルトでWebViewが提供されていません。
わざわざプラグインをインストールする必要があります。
いくつか選択肢があるのですが、ちょっと比較してみました。※2019.11.17時点

| 名前|開発元 |GitHubスター数|
|-----------------|------------------|------------------:|
|[webview_flutter](https://pub.dev/packages/webview_flutter)|Flutter公式|8.8k|
|[flutter_webview_plugin](https://pub.dev/packages/flutter_webview_plugin)|Flutter Community|922|
|[flutter_inappbrowser](https://pub.dev/packages/flutter_inappbrowser)|Lorenzo Pichilliさん|396|

Flutter公式のものがスター数では抜きん出ています。
ただ、Developer Preview状態ということもあり多くのことはできません。

[flutter_inappbrowser](https://pub.dev/packages/flutter_inappbrowser)が一番多機能で柔軟性がありそうなので、使い方を解説します。

大枠の流れとしては、以下のようになります。

1. pubspec.yamlのdependenciesにプラグイン名を書いてインストール
(VS Codeならpubspec.yamlに書くだけで自動インストール)
2. iOSの場合にInfo.plistに設定追加
3. ソースコードでimportして該当classを使う

# インストール
pubspec.yamlのdependencies以下に、`flutter_inappbrowser: ^1.2.1` を追加します。

```yaml:pubspec.yaml
dependencies:
  flutter:
    sdk: flutter

  flutter_localizations:
    sdk: flutter
  
  flutter_inappbrowser: ^1.2.1
```

# iOSの場合にInfo.plistに設定追加
ios/Runner/Info.plistに、`io.flutter.embedded_views_preview`と`NSAppTransportSecurity `の設定を追記。
`NSAppTransportSecurity`を追記しないと、http://のサイトが開けません。

```xml:Info.plist
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
--- 略 ---
	<key>io.flutter.embedded_views_preview</key>
	<string>YES</string>
	<key>NSAppTransportSecurity</key>
	<dict>
		<key>NSAllowsArbitraryLoads</key>
		<true/>
		<key>NSAllowsArbitraryLoadsInWebContent</key>
		<true/>
	</dict>
</dict>
</plist>
```

# ３つのWebView表示形式
表示形式としてInAppWebView、InAppBrowser、ChromeSafariBrowserの３つの選択肢があります。

## 1. InAppWebView
FlutterのWidgetとしてネイティブのWebViewを使います。
現状Flutter公式のwebview_flutterでは、このInAppWebView相当のものしか提供されていません。

・iOS
<img alt="InAppWebView on iOS" src="https://user-images.githubusercontent.com/5956938/54096363-e1e72000-43ab-11e9-85c2-983a830ab7a0.gif">

・Android
<img alt="InAppWebView on Android" src="https://user-images.githubusercontent.com/5956938/47271038-7aebda80-d574-11e8-98fd-41e6bbc9fe2d.gif">

## 2. InAppBrowser
ネイティブのWebViewを使用したIn-App Browser。
(iOSでCloseボタンや共有ダイアログ(Share Extension)を日本語化する方法が分からず)
・iOS
<img alt="InAppBrowser on iOS" src="https://user-images.githubusercontent.com/5956938/45934084-2a935400-bf99-11e8-9d71-9e1758b5b8c6.gif">

・Android
<img alt="InAppBrowser on Android" src="https://user-images.githubusercontent.com/5956938/45934080-26ffcd00-bf99-11e8-8136-d39a81bd83e7.gif">

## 3. ChromeSafariBrowser
iOSではSFSafariViewController、AndroidではChrome Custom Tabsを使用したIn-App Browser。

・iOS
<img alt="iOS" src="https://user-images.githubusercontent.com/5956938/46532148-0c362e00-c8a0-11e8-9a0e-343e049dcf35.gif">

・Android
<img alt="Android" src="https://user-images.githubusercontent.com/5956938/46532149-0c362e00-c8a0-11e8-8134-9af18f38a746.gif">

# ソースコードで利用
ChromeSafariBrowserの場合の実装方法を記載します。

Flutterの任意のdartコード内で、importします。

```
import 'package:flutter_inappbrowser/flutter_inappbrowser.dart';
```

Webを開きたい所で、以下を記述します。

```dart
String url = "https://....";
ChromeSafariBrowser browser = new ChromeSafariBrowser(InAppBrowser());
browser.open(url, options: {
  "addShareButton": true,
  "barCollapsingEnabled": true, //スクロールすると上下のバーが縮小してコンテンツ表示領域が拡がる
  "toolbarBackgroundColor": "#ff0000",
  "dismissButtonStyle": 1, //close
  "preferredBarTintColor": "#ff0000",
  "preferredControlTintColor": "#ffffff",
  "transitionStyle": 1 //flipHorizontal
},
optionsFallback: {
  "toolbarTopBackgroundColor": "#ff0000",
  "closeButtonCaption": "閉じる"
});
```

表示結果は以下のようになります。
<img width="320" alt="InAppBrowser.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/41382/d5ffa8d2-ebbf-96d9-a142-6db465767584.png">