Flutterでウェブ表示するflutter_inappwebviewの特徴とその使い方について解説！

Home
Flutterアプリ開発
Flutterでウェブ表示するflutter_inappwebviewの特徴とその使い方について解説！

2024.04.19

Flutterでウェブ表示するflutter_inappwebviewの特徴とその使い方について解説！

FlutterでWebページを表示するためのプラグイン、flutter_inappwebviewについて紹介していきます。flutter_inappwebviewの特徴、導入方法、クッキーやJavaScriptの実行方法などを解説します。

Flutterのflutter_inapppwebviewとは？

flutter_inappwebviewは、Github上で公開されているWebページを表示するためのOSSプラグインです。公式が提供しているwebview_flutterと並んでよく使われるプラグインで、少し複雑なカスタムもできる柔軟性のあるプラグインになっています。

flutter_inappwebviewのGitHubページ

どんな特徴があるの？

flutter_inappwebviewは、以下のような特徴があり様々な設定ができるようになっています。

Webページの表示について設定を細かくカスタマイズ可能
Flutterとウェブコンテンツ間での相互作用をサポート
音声や映像のリアルタイム通信を行うWebRTCもサポート
インラインウェブビューの他に、ヘッドレスウェブビュー、アプリ内ブラウザウィンドウなども対応

marit demerit

webview_flutterとの違い

webview_flutterは、Googleが公式サポートしているFlutterプラグインの1つです。flutter_inappwebviewは、webview_flutterと比較するとプロダクトのニーズに合わせてより柔軟なインターフェースをカスタマイズできたり、多くの機能が提供されています。

より細かな違いについては以下の記事を参考にしてみてください。
FlutterのWebViewとはどんな機能？特徴や実装方法を一挙紹介！

flutter_inappwebviewの使い方

ここからは、ffluter_inappwebviewの簡単な使い方について解説指定行きます。

パッケージのインストール

下記のコマンドでパッケージを追加するか、直接pubspec.ymlのdependenciesに追記するかでインストールすることができます。

flutter pub add flutter_inappwebview

pubspec.ymlに追記する場合は、以下の通り。

dependencies:
  flutter_inappwebview: ^6.0.0 // バージョンは適宜調整

追加した後、コンソール上で下記コマンドを実行します。

flutter pub get

Webページを表示する

Webページは、以下の方法でWebページを表示することができます。表示だけれあれば、非常に簡単にできてしまいます。

InAppWebView(
  initialUrlRequest: URLRequest(url: WebUri("https://flutter.dev")),
)

ナビゲーションを作る

Webビューでページを戻ったりリロードしたりするためには、コントローラというクラスを利用します。下記は、ページを戻る例です。

InAppWebViewController? webViewController;

InAppWebView(
  initialUrlRequest: URLRequest(url: WebUri("https://flutter.dev")),
  // ウィジェットが表示される際に呼ばれるメソッド
  onWebViewCreated: (controller) {
    webViewController = controller;
  },
)

controller?.goBack();

他にできること

flutter_inappwebviewでは、他にも様々な機能を提供しています。その中のいくつかを紹介します。

Cookieを操作する

flutter_inappwebviewではcookieを取得するための機能が提供されています。

List<Cookie> cookies = await cookieManager.getCookies(url: url);
print(cookies)

FlutterからJavaScriptを実行する

InAppWebViewControllerの関数を利用することでJavaScripのコードを実行することができます。Flutterから callJsFunc 関数を呼び出しています。

String message = "Hello, Flutter!"
controller.evaluateJavascript (handlerName: "callJsFunc($message)")

下記がJavaScriptのコードです。

function callJsFunc(message) {
    print(message)
}

JavaScriptからFlutterを実行する

InAppWebViewControllerの関数を利用することでJavaScriptからflutterのコードを実行することができます。下記の例ではJavaScriptからFlutterのコードを callFlutterFunc という関数名で呼び出しています。

controller.addJavaScriptHandler(handlerName: "callFlutterFunc", callback: (args) {
    // JavaScript関数から受け取った引数
    print(args);

    // JavaScriptに返す値
    return {
      "bar": "bar_value", "baz": "baz_value"
    };
  });

下記がJavaScriptのコードです。

window.flutter_inappwebview("callFlutterFunc")

リダイレクトする方法

Flutterで特定のURLを呼び出した場合に、アプリを起動する方法を紹介します。Webビュー内でリンクをクリックした場合は、shouldOverrideUrlLoadingがフックされて呼び出されます。

InAppWebViewController? webViewController;

InAppWebView(
    initialUrlRequest: URLRequest(url: WebUri("https://flutter.dev")),
      // ウィジェットが表示される際に呼ばれるメソッド
    onWebViewCreated: (controller) {
        webViewController = controller;
    },
    shouldOverrideUrlLoading: (controller, navigationAction) async {
        var uri = navigationAction.request.url!;
        if (uri.schema == "myapp") {
            if (await canLaunchUrl(uri)) {
                // Launch the App
                await launchUrl(uri);
            }
            return NavigationActionPolicy.CANCEL;
        }
        return NavigationActionPolicy.ALLOW;
    }
)