Androidで不安定なPlatform Viewsとの闘い

2024/5/29開催「Flutter激推し企業のエンジニアが語る！開発ノウハウLT大会」発表資料
https://enechange-meetup.connpass.com/event/318170/

Transcript

1. Android で不安定な Platform Views との闘い Flutter激推し企業のエンジニアが語る！開発ノウハウLT大会 2024.05.29 1
2. INDEX 目次 自己紹介 プロダクト紹介 Platform Views とは Android の Platform Views Android で踏んだ地雷の数々... まとめ 1 2 3 4 5 6 2
3. 1. 自己紹介 EV充電サービス事業部 Flutterテックリード 小 林 友 樹 @temoki 3 • iPhone 3G の日本上陸をきっかけにアプリ開発を始めて モバイルアプリ特化型エンジニアとしてキャリア構築 • フォルクスワーゲン ID.4（BEV）の購入をきかっけに 充電環境を整えるべく ENECHANGE にジョイン • iOS/Android 両ネイティブの体験を維持しつつ 開発スピードをあげる手段として Flutter を激推し
4. 4 2. プロダクト紹介 EV充電エネチェンジ
6. 6 2. プロダクト紹介 google_maps_flutter アプリのメイン画面
7. 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. 8 4. Android の Platform Views なんと、３種類も表示モードがございます
9. 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. 10 4. Androidの Platform Views Hybrid Composition のビュー階層 : FlutterImageView（ネイティブビューの背面）
11. 11 4. Androidの Platform Views Hybrid Composition のビュー階層 : FlutterMutatorView（ネイティブビューそのもの）
12. 12 4. Androidの Platform Views Hybrid Composition のビュー階層 : PlatformOverlayView（ネイティブビューの前面）
13. 13 4. Androidの Platform Views Texture Layer HC のビュー階層
14. 14 4. Androidの Platform Views iOS Hybrid Composition のビュー階層（オマケ）
15. 15 5. Android で踏んだ地雷の数々... この２年間の苦労を惜しみなく共有させていただきます...
16. 5. Android で踏んだ地雷の数々... 16 現象 • WebView上のインプットフィールドにフォーカスを当てても ソフトウェアキーボードが表示されない（Android 12のみ） 原因 • WebViewの表示モードが Virtual Display（Flutter 2 時代） 対策 • WebView の表示モードを Hybrid Composition に変更 • (flutter_inappwebview の useHybridComposition を ON) ① ソフトウェアキーボードが表示されない！ Web View ❓
17. 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
18. 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
19. 5. Android で踏んだ地雷の数々... 19 現象 • アプリがバックグラウンドから Google Maps / WebView 画面に戻ると Platform Views の部分がブラックアウト or 表示されたままフリーズ • WebView はフリーズしない場合もタップ位置がズレてしまう 原因 • Texture Layer HC の不具合...？ 回避策 対策 • アプリがバックグラウンドに遷移した時点で Platform Views をWidget ツリーから取り除く。フォアグラウンドに戻った時点で、Widgetツリー に戻し、その状態も復元する。（画面のちらつきが発生...） ④ Google Maps / WebView 画面にバックグラウンドから戻ると色々おかしい！ Google Maps WebView で無事解消されました 🥳
20. 20 6. まとめ • Android には Platform Views の表示モードが３種類あり、それぞれにトレードオフがあるため、 用途に応じて使い分けよう！（まずは現在デフォルトの Texture Layer HC で OK！） • Platform Views の実装も日々改善されているため、Flutter バージョンはできる限り最新に保とう！ • Flutterをプロダクション利用して２年間、困ったことはこの Platform Views の問題くらい。 それが解消された今、Flutter はモバイルアプリの生産性・品質・開発者体験において最強と感じる！ Let's Flutter together!