Omiai で感じる Flutter のメリットとデメリット

Omiai で感じる Flutter のメリットとデメリット KMP / Flutter toCアプリのクロスプラットフォーム戦略【asken｜Omiai】 1

自己紹介 ● ● ● ● 高田 晴彦 株式会社Omiai Flutter / Android エンジニア @tfandkusu ○ Qiita / Zenn / note / GitHub / X 2

Android エンジニアである私とクロスプラットフォーム 時期 会社 / サービス 言語 / Platform 共通化範囲 / 備考 2010 〜 Windows 系 パッケージベンダー C++ Windows 含め、画像認識、 API 通信を含 む一部ロジックを共通化 2018 〜 ポイ活アプリ 共通化 無し Kotlin Coroutines, Jetpack Compose 導 入 2023 〜 プリペイド Visa カードアプリ Kotlin Multiplatform UI 制御、ロジック、通信を共通化。 UI は SwiftUI / Jetpack Compose。 2025 〜 マッチングアプリ Omiai Flutter 最終的にはすべてを共通化 (一部はネイティブに残る ) モバイルアプリのクロスプラットフォームに昔からチャレンジ 3

Omiai で感じる Flutter のメリット 4

柔軟な人員配置による 高い生産性 5

過去のある現場のモバイルアプリ開発体制 プロジェクト 1 iOS エンジニア Android エンジニア プロジェクト 2 iOS エンジニア Android エンジニア ※ 人数は実際と違います 6

Omiai のモバイルアプリ開発体制 PJT 1 PJT 2 PJT 3 PJT 4 Flutter エンジニア Flutter エンジニア Flutter エンジニア Flutter エンジニア 7

Omiai のモバイルアプリ開発チームの 多様なバックグラウンド マネージャー兼システム全体のテックリード なんでもできる サーバサイド出身 iOS 出身 Android 出身 Flutter 出身 8

Figma + Claude Code を活用した仕様駆動開発 Figma 仕様 実装規約 Claude Code Flutter 実装 スキル フィードバック チームとして高品質に統一された実装 9

メンバー全員、Flutter 書くだけでない マネージャー Flutter アプリ実装 サーバサイド出身 セルフレビュー iOS 出身 実装規約整備 Android 出身 スキル整備 Flutter 出身 メンバーのバックグラウンド が多様でも クロスプラット フォーム ならではの 生産性 10

Omiai で感じる Flutter のデメリット 11

長いリスト表示のスクロールで インデックス指定ができない 12

どゆこと？ 13

まずは背景として マッチングアプリ Omiai の紹介 14

マッチングアプリ「Omiai」の紹介 結婚を見据えたお相手を探すサービス お相手を探す デート お相手の詳細プロフィールを読む いいね！を送る いいね！を受け取る メッセージ やりとり ありがとう！を返す 15

Flutter のデメリットを感じた実装箇所 お相手を探す お相手の詳細プロフィールを読む 16

お相手を探す画面 スクロールでページング 1,000人以上のお相手が表示される 長いリスト表示 見えているところだけ View / Widget を 生成 Flutter: CustomScrollView iOS: UICollectionView, LazyVGrid Android: RecyclerView, LazyColumn ※ 顔写真はすべて生成 AIによるもの 17

探す画面とお相手の詳細プロフィールを行き来する 18

競合アプリと比較して見劣りする部分を修正 横スワイプで 探す画面の順番で 詳細プロフィールを確認 19

お相手の詳細プロフィール画面の表示が、探す画面のスクロールが追従 横スワイプで 別のお相手を表示 探す画面に戻る 最後に表示していた お相手に自動でスク ロールする 長いリスト表示 のスクロール 20

お相手の詳細プロフィール画面の表示が、探す画面のスクロールが追従 17番目の お相手を表示 17番目に スクロール Flutter の CustomScrollView は N番目へのスクロール 機能ない 😭 LazyVGrid や LazyColumn にはある 21

ピクセルによるスクロール位置指定はある ● ● お相手のユニットの縦幅が固定ならば、ユニット縦幅 x N番目 / 2列でスクロー ル先ピクセル数を計算できる しかし実はユニット縦幅は可変 😱 // ScrollController を作成 final ScrollController _scrollController = ScrollController(); // CustomScrollView に ScrollController を渡す CustomScrollView( controller: _scrollController, slivers: [ /* 省略 */] ); // スクロールする _scrollController.jumpTo(index * _unitHeight / 2 /* ピクセル指定 */); 22

ユニットの縦幅が可変になった理由 普通は収まる 横幅が狭い端末では 収まらない 23

ユニットの縦幅が可変になった理由 収まらないときは 改行できるようにする 結果、ユニット全体の縦幅が 可変となる 24

ここで宣伝 サーバサイド出身 の先輩も LT 登壇 25

対応案： N番目スクロールに対応したパッケージを使う パッケージ 作者 採用を見送る理由 scrollable_positioned_list Google ● ● リポジトリがアーカイブ済み 3年更新なし super_sliver_list 個人 ● 2年更新なし flutter_list_view 個人 ● 1年9ヶ月更新なし Flutter SDK アップデートした後、大丈夫かな 🤔 26

対応：スクロール外の Widget 含めて、すべてのユニットの縦幅を計算する 画像縦幅は縦横比4:5なの で画面幅から計算できる 年齢と都道府県の縦幅は行数に依存す るので、実際に裏側でテキストをレンダリ ングして大きさを計測している 時間かかるので、一度計算した縦 幅はキャッシュしている ここは必ず1行になるように調整した 27

なんか複雑じゃない？ 28

AI が書くからOK 😄 もちろん ● AI が書いたコードのレビュー ● 適切なテストケースによる動作確認 はしている 29

まとめ Omiai における Flutter のメリット ● ● 人員配置の柔軟性 ○ 1人1PJT 多様なバックグランドのチームで も、全員で AI を育てる ○ さらに生産性アップ Omiai アプリ 全体の利益 Omiai における Flutter のデメリット ● ● 長いリスト表示のスクロールでイン デックス指定ができない スクロール位置のピクセル指定の ために複雑なコードが必要になっ た 部分的な 問題 AI が 問題を緩和 30

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