webview_flutterのWebViewでタップイベントを取得する

はじめに

Flutter公式のWebViewライブラリであるwebview_flutterはiOS/AndroidネイティブのWebViewと比べると機能が足りず、痒い所に手が届かないことが多くあります。
この記事では、webview_flutterを使用してい、WebView内のタップイベントを取得する方法を共有します。

WebViewWidgetやWebViewControllerのメソッドに用意されていないイベントリスナーを登録するためには、ネイティブのWebViewにイベントリスナーを登録して、MethodChannel経由でデータを渡す必要があります。
AndroidのWebViewを拡張してWebViewにイベントリスナーを登録するところまでを扱います。MethodChannelの使い方については、　公式リファレンスや他記事をご参照ください。

環境

Flutter 3.3.9
Android Studio Dolphin | 2021.3.1

pubspec.yaml

webview_flutter: ^4.0.1

目次

• WebViewHostApiImplをオーバーライドして、タップイベント等を取得できるようにする

WebViewHostApiImplをオーバーライドして、タップイベント等を取得できるようにする

GeneratedAndroidWebView.WebViewHostApi.setup()で、カスタムしたWebViewHostApiImplをsetすることで、ネイティブのWebViewのイベントを取得できるようになります。
コレを応用することで、ネイティブのWebViewの機能を使うことができるようになります。

コード例

import android.webkit.WebView
import io.flutter.Log
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugins.webviewflutter.*

class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        val webViewPlugin =
            flutterEngine.plugins[WebViewFlutterPlugin::class.java] as WebViewFlutterPlugin?
        val instanceManager = webViewPlugin?.instanceManager ?: return

        val apiImpl: WebViewHostApiImpl = object : WebViewHostApiImpl(
            instanceManager,
            flutterEngine.dartExecutor.binaryMessenger,
            WebViewProxy(),
            this,
        ) {
            override fun create(instanceId: Long) {
                super.create(instanceId)
                val webView = instanceManager.getInstance(instanceId) as WebView?
                webView?.apply {
                    settings.apply {
                        // 取得したいイベントのリスナーを追加する
                        setOnLongClickListener {
                            Log.d("webView", "onLongClick")
                            return@setOnLongClickListener false
                        }
                    }
                }
            }
        }

        GeneratedAndroidWebView.WebViewHostApi.setup(
            flutterEngine.dartExecutor,
            apiImpl
        )
    }
}

参考URL

おわりに

今回は、GeneratedAndroidWebView.WebViewHostApi.setup（）を使用して、WebViewのタップイベント等を取得する方法を紹介しました。
他にも、WebChromeClientHostApi.setup() を同じように使用することで、カスタムしたWebViewClientを使うことができるようになります。
こちらは、後ほど記事化しようと思います。