---
title: Omiai で感じる Flutter のメリットとデメリット
tags:  #flutter  
author: [高田 晴彦](https://docswell.com/user/tfandkusu)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/YJ6W8GMMJV.jpg?width=480
description: KMP / Flutter toCアプリのクロスプラットフォーム戦略【asken｜Omiai】で発表したスライドです。 https://enito.connpass.com/event/398591/
published: September 29, 26
canonical: https://docswell.com/s/tfandkusu/5L36QL-OmiaiFlutterProsCons
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/YJ6W8GMMJV.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GJ5M9VZQJ4.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/9E2923RW7R.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/D7Y4Y1D9EM.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/VENYP26DJ8.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/Y79P31L8E3.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/G78DM4XZ7D.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/L7LM3681JR.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/4EMYD565EW.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/PER943PZJ9.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/P7XQ2431EX.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/37K9MZYM7D.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/LJ3WYD92J5.jpg)

どゆこと？
13


# Page. 14

![Page Image](https://bcdn.docswell.com/page/8JDK5PG6EG.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/VEPKGN8Z78.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/27VV6KNM7Q.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/5JGLNQKX7L.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/47QYQKN5EP.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/KE4WNPGVJ1.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/L71Y59D4JG.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/G7WG5QYZE2.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/4JZLNWXLE3.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/YE6W8G4MEV.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/GE5M9VQQE4.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/972923PWJR.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/DJY4Y1597M.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/V7NYP2NDE8.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/YJ9P31R873.jpg)

なんか複雑じゃない？
28


# Page. 29

![Page Image](https://bcdn.docswell.com/page/GJ8DM4WZJD.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/LJLM36N1ER.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/47MYD5X57W.jpg)

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