【Android】FlutterでWebViewを使う

序文

Web サイト上にすでにあるコンテンツの一部をアプリケーションで表示したい状況を考えてみましょう。そのコンテンツは、ユーザー同意ページや支払いページなどである可能性があります。したがって、ページ全体のロジックを記述してページ全体を構築し、それをアプリケーションで使用できます。次にできることは、Web サイトのコンテンツをアプリに表示することです。これで準備完了です。最も良い点は、この Web ページを開くためにブラウザアプリケーションを使用する必要がないことです。こうすることで、アプリケーション内でそのページのコードを記述する時間を節約できます。

多くのアプリケーションでもこの機能が使用されています。たとえば、アプリケーションで何らかの支払い操作を実行すると、支払いプロセス中に Web ページが読み込まれ、そこで支払いを行うことに気づくでしょう。この利点は、モバイルアプリケーション用に支払いコードを再度記述する必要がないことです。お金を扱っているので、コードを再度記述するよりも、テスト済みの Web ページを表示して取引する方が良いでしょう。

したがって、アプリ内でいくつかの Web ページを表示するには、Flutter チームによって構築された webview_flutter というプラグインを使用できます。このブログでは、このプラグインを使用して Web ページを表示する方法を学びます。

webview_flutter プラグインは、WebView ウィジェットを提供します。iOS では、WebView ウィジェットは WKWebView によってサポートされ、Android では、WebView ウィジェットは WebView によって強化されています。

セットアイテム

新しい Flutter プロジェクトを作成します。名前: flutter_webview_example
以下はプロジェクトの構造です。したがって、必要なフォルダー (src) とファイル (main.dart、app.dart、webview_container.dart) を作成してプロジェクトをセットアップします。

依存関係を追加する

webview_flutter を使用するには、その依存関係を追加する必要があります。したがって、pubspec.yaml ファイルに次の依存関係を追加します。

dependencies:
  webview_flutter: ^0.3.20

注: 依存関係を追加するときは、適切なインデントを指定してください。そうしないと、エラーが発生します。

次に、ファイルを保存するか (VS Code を使用している場合)、pub get オプションを押して依存関係をインストールし (Android Studio の場合)、依存関係をインストールします。さらに、Flutter を使用してコマンドラインからパッケージをインストールすることもできます。

$ flutter pub get

iOSの追加設定

iOS で WebView を使用するには、Info.plist ファイルを開き、ファイルの要素に次の内容を追加します。

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

これで依存関係の部分は完了です。コーディング部分に進みましょう。

コーディング部分

main.dart ファイルを開き、次のコードを追加します。

import 'package:flutter/material.dart';
import 'package:flutter_webview_example/src/app.dart';

void main() => runApp(App());

次に、src という名前の新しいフォルダーを作成し、このフォルダーの下に 2 つのファイル app.dart、つまり webview_container.dart を作成します。この app.dart ファイルは、このファイルにロードする URL と AppBar のタイトル webview_container.dart を提供するために使用されます。webview_container.dart ファイルは、WebView を追加してアプリケーションに必要な URL を表示する役割を果たします。

app.dart ファイルのコードは次のとおりです。

import 'package:flutter/material.dart';
import 'package:flutter_webview_example/src/webview_container.dart';

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewContainer('https://blog.mindorks.com', 'MindOrks'),
    );
  }
}

ここでは、MaterialApp を返し、URL とタイトルを WebViewContainer クラスに提供します。webview_container.dart ファイルのコードは次のとおりです。

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewContainer extends StatefulWidget {
  final url;
  final title;
  WebViewContainer(this.url, this.title);
  @override
  createState() => _WebViewContainerState(this.url, this.title);
}

class _WebViewContainerState extends State<WebViewContainer> {
  var _url;
  var _title;
  final _key = UniqueKey();
  _WebViewContainerState(this._url, this._title);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(_title),
      ),
      body: Column(
        children: [
          Expanded(
            child: WebView(
              key: _key,
              javascriptMode: JavascriptMode.unrestricted,
              initialUrl: _url,
            ),
          ),
        ],
      ),
    );
  }
}

上記のコードでは、WebView ウィジェットを使用しており、そのウィジェット内で、initialUrl を使用して目的の URL を開いていることがわかります。上記で使用した javascriptMode パラメータを使用して、WebView で JavaScript を有効または無効にすることもできます。WebView ではデフォルトで JavaScript が無効になっています。

それ以外に、WebViewController で WebView を使用することもでき、WebView が完全に構築されるとすぐに WebViewController が返されます。したがって、このコントローラーを使用すると、別の URL の読み込みや現在の URL の取得、URL のお気に入りへの追加など、さまざまなアクションを実行できます。WebViewController の例を次に示します。

WebViewController _controller;
WebView(
  initialUrl: 'https://blog.mindorks.com',
  onWebViewCreated: (WebViewController webViewController) {
    _controller = webViewController;
  },
);
//...After some operations:
_controller.loadUrl('https://mindorks.com');

Flutter で WebView を使用することがすべてです。