ウェブサイト

Flutterアプリ開発

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

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

Flutterのflutter_inapppwebviewとは?

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

どんな特徴があるの?

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;
    }
)

privacy manifest対応

iOSでは、Privacy Manifestの対応が必要となっています。Flutterで対応するためには、バージョンを3.19以上にアップデートする必要があります。

また、Flutterプロジェクト内のXcodeプロジェクトでPrivacyInfo.xcprivacyを作成してTargetにRunnerを設定します。

dartFlutterのWebViewとはどんな機能?特徴や実装方法を一挙紹介!Prev

Flutterでウェブ表示するwebview_flutterの特徴とその使い方について解説!Nextウェブサイト

Related post

  1. Flutterアプリ開発

    初めてでも開発できるFlutter入門

    FlutterでAndroidやiPhoneアプリを作りたいけれど、ど…

  2. Flutterアプリ開発

    Flutterを使ったタスク管理アプリUIの作り方を解説

    Flutterを使ったアプリ開発について勉強してきたら、それらの知識を…

  3. Flutterアプリ開発

    Flutterで一覧表示の実装に使える3つの方法

    みなさんは様々なスマホアプリを日頃から触っていると思います。様々なアプ…

  4. dart

    Flutterアプリ開発

    FlutterのWebViewとはどんな機能?特徴や実装方法を一挙紹介!

    Webページを表示するモバイルアプリはよくありますよね。Flutter…

  5. Flutterアプリ開発

    Flutterで簡単なカウンターアプリを作ってみよう

    FlutterではさまざまなUIを実装するためめに、多くのパーツが用意…

  6. ウェブサイト

    Flutterアプリ開発

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

    Flutterでアプリ開発をしているとウェブ表示をしたいという要望が出…

PAGE TOP