Flutter で flutter_webview 4系を使った Flutter のネイティブと js のやり取り

今年は月一投稿をやろうと目標を立てたもみじんです。

この記事は Flutter の WebView の記事を記載します。

お仕事で Android のWebViewを使ったネイティブ( java or kotlint) と JS をやり取りするコードを書いています。

色々と考えないと作らなければ行けないのでとても大変です。

このコードを書いているときに Flutter ではどうやってやるのではと疑問がでたので調べてみました。

Flutter × WebView
コード
参考文献
- 関連

Flutter × WebView

対象プラットフォーム

Flutterは、すでにご存知だと思いますがクロスプラットフォームです。

ひとつのコードでAndroidもiOSもかけてしまいます。

今回は Android を対象にとしました。

やること

WebViewを使って Flutter と JavaScript の双方向でメッセージができることをこの記事でやります。

環境

Flutter
- 3.3.1
WebView
- webview_flutter
  - 4.0.2( 2023/01/24時点では最新 )

コード

コード全体

Githubにあげています。

GitHub - Momijinn/my_flutter_webview_js: flutterでwebviewとjsのやり取りテスト

flutterでwebviewとjsのやり取りテスト. Contribute to Momijinn/my_flutter_webview_js development by creating an account on GitHub.

WebView関連は src/lib/webviewApp.dart にまとめています。

デモ

Github の README 参照。

my_flutter_webview_js/README.md at main · Momijinn/my_flutter_webview_js

flutterでwebviewとjsのやり取りテスト. Contribute to Momijinn/my_flutter_webview_js development by creating an account on GitHub.

ポイント

ネットを見るとおなじライブラリで実装しているものがありますが、4系からかなりの変更があったらしく、ほとんどの記事が使い物になりませんでした。

私が実装してみたときのポイントを書いておきます。

JS から Flutterの関数を呼び出せるようにする

以下のように定義すると window.flutterApp で呼べる。

await webViewController
　　.addJavaScriptChannel('flutterApp', onMessageReceived: jsMessageRecv);

Flutter から JS の関数を呼ぶ

以下のように定義すると、JS の関数にコールバックできる。
※ JS に呼び出す関数を定義しないとエラーになる。

引数を渡すときはシングルクォーテーションで囲ってあげないと渡すことができないので注意。

await _controller
　　.runJavaScriptReturningResult("flutterMessage('${result.message}')");

Flutter からの引数をJSで受け取るときの注意

Flutter からのメッセージを受けとった時に、JS側で .toString() をしてStringに変換する必要がある。

これをしないと、エラーになる。

constflutterMessage = (message) => {
  console.log(`recv message: ${message}`);

  // toString() しないとなぜか value に入らずにエラーになる
  recvTextareaElement.value = message.toString();
}

WebView デバッグ

webview controller でプラットフォームの分岐をして、 Android であれば Android特有のデバッグ許可コードを書く。

// android debug
if (webViewController.platformisAndroidWebViewController) {
  AndroidWebViewController.enableDebugging(true);
}

あとは、 chrome://inspect/ でデバッグできる。

躓いたところ

webview 4.0.2 で使える SDK バージョンが高すぎる

webview_flutter 4.0.2 は現時点において android sdk 32（Android 12）以上ないとエラーになる。

かなり導入しづらい。

One or more plugins require a higher Android SDK version.
Fix this issue by adding the following to /Users/kana/Desktop/my_flutter_webview_js/src/android/app/build.gradle:
android {
compileSdkVersion 32
...
}

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:checkDebugAarMetadata'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.CheckAarMetadataWorkAction
> One or more issues found when checking AAR metadata values:

Dependency 'androidx.webkit:webkit:1.5.0' requires 'compileSdkVersion' to be set to 32 or higher.
Compilation target for module ':app' is 'android-31'

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.

* Get more help at https://help.gradle.org