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

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

More than 1 year has passed since last update.

はじめに

この記事は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プラグインが公開されました。現在はデベロッパープレビューという形で提供されていますが、誰でも利用することが出来ます。

パッケージ

https://pub.dartlang.org/packages/webview_flutter

webview_flutterのGithubリポジトリ

https://github.com/flutter/plugins/tree/master/packages/webview_flutter

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

Screen Shot 2018-12-12 at 00.45.24.png

iOS

Screen Shot 2018-12-12 at 00.45.32.png

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を業務で利用できない理由が一つ減ったということで、今後のアップデートに期待したいですね。

この記事のソースコード

https://github.com/aoinakanishi/flutter-webview-example

Why do not you register as a user and use Qiita more conveniently?
  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
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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