【Flutter】Android14でのWebView表示不具合とその解決策
はじめに
今回、Flutterアプリ内でWebViewを表示する際に予期しない問題が発生し、この問題の解決策と原因について自分なりにまとめてみました。この記事が同様の問題に直面している方々の参考になれば幸いです。
事象
Android 14の端末で、アプリ内で使用しているWebViewが表示されず、画面が真っ黒になります。
例）
Flutterで開発したアプリで、WebViewを使用する画面があるのですが、使用中やバックグラウンドからすぐに復帰した際は問題ないものの、別のアプリを使用したり、複数のアプリを起動後にタスクキルしていない状態で本アプリを再度表示すると、WebViewが表示されず画面が真っ黒になります。この現象は、Android 14端末の実機でのみ発生します。
結論
Flutterのバージョンを3.22.0以上にアップデートすると、この問題は解消されました。私はFlutter 3.7.12を使用している時にこの問題に直面しましたが、バージョンアップにより画面が真っ黒になるバグは解消されました。
原因
Flutter 3.22のリリースノートにて以下のようにあった。
Flutterを使ってネイティブのAndroidコンポーネント（マップ、ウェブビュー、特定のUI要素など）に依存するアプリを構築している場合、重要なお知らせがあります。
Android 14のバグのため、古いバージョンのFlutterで作られたアプリは、この新しいAndroidバージョンを実行しているデバイスでは正しく動作しない可能性があります。
Flutter 3.22はこの問題を修正し、Androidアプリのこれらのネイティブコンポーネントの全体的なパフォーマンスを改善します。
このため、古いバージョンのFlutterとWebView、およびAndroid 14の組み合わせによって発生する不具合が原因で、画面が真っ黒になったのではと推測しています。
参考記事
Discussion