Help us understand the problem. What is going on with this article?

FlutterでWebView / In-App Browser

More than 1 year has passed since last update.

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_previewNSAppTransportSecurityの設定を追記。
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>

3つのWebView表示形式

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

1. InAppWebView

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

・iOS
InAppWebView on iOS

・Android
InAppWebView on Android

2. InAppBrowser

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

・Android
InAppBrowser on Android

3. ChromeSafariBrowser

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

・iOS
iOS

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

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

motoy3d
スポーツ系IT会社で働くアーキテクト・エンジニア。 https://twitter.com/motoy3d https://github.com/motoy3d
https://motoy3d.blogspot.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away