$30 off During Our Annual Pro Sale. View Details »

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

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

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

Tomoki Kobayashi

May 29, 2024
Tweet

More Decks by Tomoki Kobayashi

Other Decks in Programming

Transcript

  1. INDEX 目次 自己紹介 プロダクト紹介 Platform Views とは Android の Platform

    Views Android で踏んだ地雷の数々... まとめ 1 2 3 4 5 6 2
  2. 1. 自己紹介 EV充電サービス事業部 Flutterテックリード 小 林 友 樹 @temoki 3

    • iPhone 3G の日本上陸をきっかけにアプリ開発を始めて モバイルアプリ特化型エンジニアとしてキャリア構築 • フォルクスワーゲン ID.4(BEV)の購入をきかっけに 充電環境を整えるべく ENECHANGE にジョイン • iOS/Android 両ネイティブの体験を維持しつつ 開発スピードをあげる手段として Flutter を激推し
  3. 5

  4. 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 の実装は1つのみ Google Maps Web View EV充電エネチェンジアプリで 使用している Platform Views
  5. 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 のみ
  6. 5. Android で踏んだ地雷の数々... 16 現象 • WebView上のインプットフィールドにフォーカスを当てても ソフトウェアキーボードが表示されない(Android 12のみ) 原因

    • WebViewの表示モードが Virtual Display(Flutter 2 時代) 対策 • WebView の表示モードを Hybrid Composition に変更 • (flutter_inappwebview の useHybridComposition を ON) ① ソフトウェアキーボードが表示されない! Web View ❓
  7. 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
  8. 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
  9. 5. Android で踏んだ地雷の数々... 19 現象 • アプリがバックグラウンドから Google Maps /

    WebView 画面に戻ると Platform Views の部分がブラックアウト or 表示されたままフリーズ • WebView はフリーズしない場合もタップ位置がズレてしまう 原因 • Texture Layer HC の不具合...? 回避策 対策 • アプリがバックグラウンドに遷移した時点で Platform Views をWidget ツリーから取り除く。フォアグラウンドに戻った時点で、Widgetツリー に戻し、その状態も復元する。(画面のちらつきが発生...) ④ Google Maps / WebView 画面にバックグラウンドから戻ると色々おかしい! Google Maps WebView で無事解消されました 🥳
  10. 20 6. まとめ • Android には Platform Views の表示モードが3種類あり、それぞれにトレードオフがあるため、 用途に応じて使い分けよう!(まずは現在デフォルトの

    Texture Layer HC で OK!) • Platform Views の実装も日々改善されているため、Flutter バージョンはできる限り最新に保とう! • Flutterをプロダクション利用して2年間、困ったことはこの Platform Views の問題くらい。 それが解消された今、Flutter はモバイルアプリの生産性・品質・開発者体験において最強と感じる! Let's Flutter together!