FlutterでWebView / In-App Browser

FlutterでWebViewを使う

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

名前	開発元	GitHubスター数
webview_flutter	Flutter公式	8.8k
flutter_webview_plugin	Flutter Community	922
flutter_inappbrowser	Lorenzo Pichilliさん	396

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

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 を追加します。

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://のサイトが開けません。

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

・Android

2. InAppBrowser

ネイティブのWebViewを使用したIn-App Browser。
(iOSでCloseボタンや共有ダイアログ(Share Extension)を日本語化する方法が分からず)
・iOS

・Android

3. ChromeSafariBrowser

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

・iOS

・Android

ソースコードで利用

ChromeSafariBrowserの場合の実装方法を記載します。

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

import 'package:flutter_inappbrowser/flutter_inappbrowser.dart';

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

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": "閉じる"
});

表示結果は以下のようになります。