Google公式Flutter用WebViewプラグインを一通り使ってみた

はじめに

この記事はFlutter Advent Calendar 2018の11日目分です。

すぐに枠が埋まってしまっていたのでFlutter Advent Calendarに参加する予定はなかったのですが、前回の「Google公式Flutter用Google Mapsプラグインを一通り使ってみた」に引き続き、11日枠が投稿されずに空いていたので急遽この記事を書くことにしました！

今回も先日のFlutter Live 2018で合わせて提供が開始されたWebViewです。

Google公式Flutter用WebViewプラグインがついに公開

Flutterユーザーならみなさんご存知かと思いますがFlutter上でWebViewを使う公式プラグインは存在しませんでした。

ところが先日「Flutterウィークリー #37」でもお伝えしたとおり、Googleから公式のWebViewプラグインが公開されました。現在はデベロッパープレビューという形で提供されていますが、誰でも利用することが出来ます。

パッケージ

webview_flutterのGithubリポジトリ

iOS用設定

ios/Runner/Info.plistを開いて以下を追記します

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

dependencyにwebview_flutterを追加

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.1.0+1

dev_dependencies:
  flutter_test:
    sdk: flutter

パッケージの宣言

import 'package:webview_flutter/webview_flutter.dart';

WebView表示用コード

      body: WebView(
        initialUrl: 'https://flutter.io',\
      ),

スクリーンショット

Android

iOS

JavaScriptを有効にする

      body: WebView(
        initialUrl: 'https://flutter.io',
        javaScriptMode: JavaScriptMode.unrestricted,
      ),

値	状態
JavaScriptMode.disabled	無効
JavaScriptMode.unrestricted	有効

WebViewクリエイト時のイベントを取得

      body: WebView(
        initialUrl: 'https://flutter.io',
        javaScriptMode: JavaScriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          print("Created!");
        },
      ),

WebViewControllerで出来ること

メソッド名	引数	説明
loadUrl	string	URLを渡して遷移
canGoBack	-	前のページに戻れるか
canGoForward	-	先のページに進めるか
goBack	-	戻る
goForward	-	進む

まとめ

先日調査したGoogle Mapsにも増してまだまだ何も出来ない印象です。基本的な動作、ページの表示、戻る、進む、JavaScriptの有効化、無効化の操作が出来るだけで他の設定変更やHTTPヘッダの操作、エラーハンドリング、などなど、WebViewを使って独自の機能を実装することは現状できないと考えたほうが良さそうです。

プラグインのソースを追いかけていくとupdateSettingsというメソッドがあったので、いろいろと変更できるかと思いましたが、jsMode というパラメーターを受け取って処理できる以外は

throw new IllegalArgumentException("Unknown WebView setting: " + key);

というエラーを返すだけでした。唯一受け取ることが可能なjsModeも先のjavaScriptModeでOn/Offを切り替えられるのと同じことが出来るようになっていました。

WebViewもアプリ内でよく使う機能のひとつなので、公式プラグインが出たのはFlutterを業務で利用できない理由が一つ減ったということで、今後のアップデートに期待したいですね。

この記事のソースコード