Flutter の Add-to-app でナビゲーションスタックが Flutter → ネイティブ → Flutter になってしまう場合の技術選定事例

Flutter の Add-to-app で ナビゲーションスタックが Flutter → ネイティブ → Flutter になってしまう場合の 技術選定事例 potatotips #90 iOS/Android開発Tips共有会 1

自己紹介 ● ● 高田 晴彦 @tfandkusu ○ ● ● Qiita/Zenn/note/GitHub/X Flutter / Android エンジニア スプラトゥーンが好き 2

今月から株式会社Omiaiで働いている ● ● ● Omiai(オミアイ) 恋活・婚活のため のマッチングアプリ 2012年から長年運営 古いコードベースが抱える多くの技 術的負債や仕様差異 3

Flutter リプレイスが進行中 リプレイス中も機能追加を続けたい Add-to-app 詳細は FlutterKaigi 2024「マッチングアプリ『Omiai 』のFlutterへのリプレイスの挑戦」 参照 4

• https://2024.flutterkaigi.jp/session/369e19d9-1f27-40e6-b294-64c6ca9bfcae

Flutter の Add-to-app とは ネイティブの iOS / Android アプリの一部を Flutter で実装 5

Omiai における Add-to-app お相手を探す画面は Flutter マイページもネ イティブ ボトムナビゲーションは ネイティブ 発表時点では Add-to-app を使用したアプリは未リリース 6

Add-to-app の 3つの概念 1. 2. 3. FlutterEngine FlutterFragment MethodChannel 7

FlutterEngine ● ● ネイティブから FlutterEngine を作ることで Flutter の世界を作ることができる FlutterEngine は複数作ることができる ○ ● それぞれ別の世界なので、グローバル変数等は、別の FlutterEngine に反映されない ネイティブの FlutterEngineGroup クラスを使うことで、短時間かつ少ないメモリ 消費で FlutterEngine を複数作ることができる 8

FlutterFragment FlutterEngine が持つ Flutter の世界を ネイティブに表示することができる FlutterEngine FlutterFragment は Android のクラス名で、 iOS では FlutterViewController になる。 Flutter Fragment 私が Android エンジニアというのもあり、説明を簡単にするために、 この発表では FlutterFragment のみで解説。 Android は FlutterActivity もある 9

MethodChannel Flutter の世界と ネイティブの世界で ネイティブの ログイン画面 認証情報 情報の受け渡しができる Flutter の世界 MethodChannel 10

Omiai の Add-to-app で発生した課題 11

実装内容 お相手を探す Flutter 表示タブ 切り替え マイページ プロフィール設定 ネイティブ Flutter 12

ネイティブから Flutter の画面を呼び出すときに 以前に表示していた画面の内容が一瞬見える FlutterEngine は 1つだけ使用 アニメーションを調整すれば なんとかなるかも🤔 13

1つの FlutterEngine で2つの FlutterFragment を設置すると、古い方が真っ白になる Flutter Fragment 戻る 戻る ネイティブ Flutter Fragment 😭 サンプルコードで問題を発見したため、上記スクリーンショットは合成です。 14

解決方法2つ 同時に2つの FlutterFragment が存 在しないように、1つの FlutterFragment を付けたり剥がし たりする。 FlutterFragment は2個なので、 FlutterEngine も2個使う。 アニメーションの調整 アニメーションの調整 必要 不要 15

複数の FlutterEngine の連携方法 プロフィール用 FlutterEngine Flutter Fragment お相手を探す用 FlutterEngine MethodChannel Flutter Fragment ネイティブ実装 数が増えると実装が大変そう🤔 16

FlutterEngine は1つなのか複数なのか 社歴2週間で決断しないといけない😲 もちろん先輩方から助言を頂けます😌 17

結論「複数の FlutterEngine を使う」 FlutterFragment を付けたり剥がしたりす る処理の品質確保に不安があった。 どの OS バージョンでも 大丈夫だろうか 😟 Flutter Fragment ネイティブ Flutter Fragment ユーザが素早く操作して も大丈夫だろうか 😨 剥がして付ける 18

結論「複数の FlutterEngine を使う」 プロフィール用 FlutterEngine 自分のことを扱う Flutter Fragment 探す用 FlutterEngine お相手のことを扱う Flutter Fragment そんなに連携すること無いの では🤔 自分の趣味などを変えると、お相手の オススメ順が変わるので、リロードを要 求するぐらいでよさそう 19

まとめ ● Flutter Add-to-app の3つの概念 ○ ○ ○ ● ● FlutterEngine FlutterFragment MethodChannel ナビゲーションスタックが Flutter → ネイティブ → Flutter になる場合は決断が 必要 FlutterEngine を複数使うことは品質面の不安は少ない選択肢だが、アプリ仕様 によっては MethodChannel の開発工数が膨れる可能性がある 20

ありがとうございました 21

【補足】Add-to-app を活用した Flutter リプレイスの望ましい考え方 この画面に機能を追加したいので Flutter リプレイスすることになったら Flutter ネイティブ ネイティブ ここも Flutter リプレイス 22