Android で不安定な Platform Views との闘い Flutter激推し企業のエンジニアが語る！開発ノウハウLT大会 2024.05.29 1

INDEX 目次 自己紹介 プロダクト紹介 Platform Views とは Android の Platform Views Android で踏んだ地雷の数々... まとめ 1 2 3 4 5 6 2

1. 自己紹介 EV充電サービス事業部 Flutterテックリード 小 林 友 樹 @temoki 3 ● iPhone 3G の日本上陸をきっかけにアプリ開発を始めて モバイルアプリ特化型エンジニアとしてキャリア構築 ● フォルクスワーゲン ID.4（BEV）の購入をきかっけに 充電環境を整えるべく ENECHANGE にジョイン ● iOS/Android 両ネイティブの体験を維持しつつ 開発スピードをあげる手段として Flutter を激推し

4 2. プロダクト紹介 EV充電エネチェンジ

5

6 2. プロダクト紹介 google_maps_flutter アプリのメイン画面

7 3. Platform Views とは ※ 次の公式ドキュメントより ・Hosting native Android views in your Flutter app with Platform Views ・Hosting native iOS views in your Flutter app with Platform Views ● Platform Views により Flutter アプリにネイティブの ビューを組み込めるようになる ● (例) Google Maps の Android/iOS SDKからネイティブの マップビューを Flutter アプリで使用可能 ● Android の Platform Views には複数の実装（表示モード） があり、それらはパフォーマンスとネイティブの忠実度の 両面においてトレードオフがある ● iOS の Platform Views の実装は１つのみ Google Maps Web View EV充電エネチェンジアプリで 使用している Platform Views

8 4. Android の Platform Views なんと、３種類も表示モードがございます

01 02 03 9 4. Androidの Platform Views Virtual Display Hybrid Composition Texture Layer (HC) ● VD・HCの問題を解消すべく Flutter 3で導入された方式 ● HC 同様にネイティブビューを Android ビュー階層に配置 ● VD 同様に描画は Texture を使用 ● ネイティブビューが SurfaceView そのもの、もしくはそれを含む 場合に機能しない ● Android SDK 23 以降で利用可 ● Android ビュー階層の中に、 直接ネイティブビューを配置する (VD のような問題が発生しにくい) ● ネイティブビューの前後に Flutter Widget ツリーを分割する ● パフォーマンス面で問題あり (特に Android 10 以前) ● Android SDK 19 以降で利用可 ● ネイティブビューを Android の Virtual Display に描画し、それを Flutter の Texture に接続する ● テキスト入力やアクセシビリティ などの機能において問題が発生 (ネイティブビューが Android ビューの階層にいないため) ● Android SDK 20 以降で利用可 VD HC TL 各表示モードとトレードオフ ℹ iOS は Hybrid Composition のみ

10 4. Androidの Platform Views Hybrid Composition のビュー階層 : FlutterImageView（ネイティブビューの背面）

11 4. Androidの Platform Views Hybrid Composition のビュー階層 : FlutterMutatorView（ネイティブビューそのもの）

12 4. Androidの Platform Views Hybrid Composition のビュー階層 : PlatformOverlayView（ネイティブビューの前面）

13 4. Androidの Platform Views Texture Layer HC のビュー階層

14 4. Androidの Platform Views iOS Hybrid Composition のビュー階層（オマケ）

15 5. Android で踏んだ地雷の数々... この２年間の苦労を惜しみなく共有させていただきます...

5. Android で踏んだ地雷の数々... 16 現象 ● WebView上のインプットフィールドにフォーカスを当てても ソフトウェアキーボードが表示されない（Android 12のみ） 原因 ● WebViewの表示モードが Virtual Display（Flutter 2 時代） 対策 ● WebView の表示モードを Hybrid Composition に変更 ● (flutter_inappwebview の useHybridComposition を ON) ① ソフトウェアキーボードが表示されない！ Web View ❓

5. Android で踏んだ地雷の数々... 17 現象 ● ダークモードで Flutter 画面から Google Maps 画面に直接戻ったら 前の Flutter 画面の内容が透けて表示されてしまう 原因 ● Hybrid Composition の不具合 対策 ● Google Maps の表示モードを Texture Layer HC に変更（Flutter 3） ● (google_maps_flutter_android の useAndroidViewSurface を OFF) ② Google Maps 画面に戻ったら前の画面が透けてる〜 Google Maps Flutter

5. Android で踏んだ地雷の数々... 18 現象 ● Web View 画面から Google Maps 画面に直接戻ったら アプリがクラッシュする 原因 ● WebView と Google Maps で表示モードが異なる（おそらく） ● WebView : Hybrid Composition ● Google Maps : Texture Layer HC 対策 ● WebView の表示モードを Texture Layer HC に変更 ● (webview_flutter_android の displayWithHybridComposition を OFF) ③ Google Maps 画面に戻ったらクラッシュ！ Crash! Google Maps Web View

5. Android で踏んだ地雷の数々... 19 現象 ● アプリがバックグラウンドから Google Maps / WebView 画面に戻ると Platform Views の部分がブラックアウト or 表示されたままフリーズ ● WebView はフリーズしない場合もタップ位置がズレてしまう 原因 ● Texture Layer HC の不具合...？ 回避策 対策 ● アプリがバックグラウンドに遷移した時点で Platform Views をWidget ツリーから取り除く。フォアグラウンドに戻った時点で、Widgetツリー に戻し、その状態も復元する。（画面のちらつきが発生...） ④ Google Maps / WebView 画面にバックグラウンドから戻ると色々おかしい！ Google Maps WebView で無事解消されました 🥳

20 6. まとめ ● Android には Platform Views の表示モードが３種類あり、それぞれにトレードオフがあるため、 用途に応じて使い分けよう！（まずは現在デフォルトの Texture Layer HC で OK！） ● Platform Views の実装も日々改善されているため、Flutter バージョンはできる限り最新に保とう！ ● Flutterをプロダクション利用して２年間、困ったことはこの Platform Views の問題くらい。 それが解消された今、Flutter はモバイルアプリの生産性・品質・開発者体験において最強と感じる！ Let's Flutter together!