この記事は Flutter の WebView の記事を記載します。
お仕事で Android のWebViewを使った ネイティブ( java or kotlint) と JS をやり取りするコードを書いています。
色々と考えないと作らなければ行けないのでとても大変です。
このコードを書いているときに Flutter ではどうやってやるのではと疑問がでたので調べてみました。
Flutter × WebView
対象プラットフォーム
Flutterは、すでにご存知だと思いますがクロスプラットフォームです。
ひとつのコードでAndroidもiOSもかけてしまいます。
今回は Android を対象にとしました。
やること
WebViewを使って Flutter と JavaScript の双方向でメッセージができることをこの記事でやります。
環境
-
Flutter
- 3.3.1
-
WebView
-
- 4.0.2( 2023/01/24時点では最新 )
-
コード
コード全体
Githubにあげています。
WebView関連は src/lib/webviewApp.dart にまとめています。
デモ
Github の README 参照。
ポイント
ネットを見るとおなじライブラリで実装しているものがありますが、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
