Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
チームで採用しているriverpodを使ったFlutterのアーキテクチャとriverpod ...
Search
Kakeru Nakabachi
August 06, 2021
Programming
6
4.7k
チームで採用しているriverpodを使ったFlutterのアーキテクチャとriverpod v1.0.0
Kakeru Nakabachi
August 06, 2021
Tweet
Share
More Decks by Kakeru Nakabachi
See All by Kakeru Nakabachi
Flutterアプリで可用性を向上させたFeatureFlagの運用戦略とその方法
b4tchkn
0
730
Inside Flutter Text
b4tchkn
1
180
Flutterアプリのセキュリティ対策を考えてみる
b4tchkn
6
6.2k
Textの構造を理解する/Understanding the Structure of Text
b4tchkn
3
2.2k
Other Decks in Programming
See All in Programming
〜可視化からアクセス制御まで〜 BigQuery×Looker Studioで コスト管理とデータソース認証制御する方法
cuebic9bic
0
220
テスト分析入門/Test Analysis Tutorial
goyoki
10
2.6k
事業KPIを基に価値の解像度を上げる
nealle
0
190
型付け力を強化するための Hoogle のすゝめ / Boosting Your Type Mastery with Hoogle
guvalif
1
220
ユーザーにサブドメインの ECサイトを提供したい (あるいは) 2026年函館で一番熱くなるかもしれない言語の話
uvb_76
0
170
Interface vs Types ~型推論が過多推論~
hirokiomote
1
220
推論された型の移植性エラーTS2742に挑む
teamlab
PRO
0
130
イベントソーシングとAIの親和性ー物語とLLMに理解できるデータ
tomohisa
1
160
RubyKaigi Hack Space in Tokyo & 函館最速 "予習" 会 / RubyKaigi Hack Space in Tokyo & The Fastest Briefing of RubyKaigi 2026 in Hakodate
moznion
1
110
2025年のz-index設計を考える
tak_dcxi
13
5.2k
TypeScript エンジニアが Android 開発の世界に飛び込んだ話
yuisakamoto
6
880
ドメイン駆動設計とXPで支える子どもの未来 / Domain-Driven Design and XP Supporting Children's Future
nrslib
0
350
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
The World Runs on Bad Software
bkeepers
PRO
68
11k
How to Ace a Technical Interview
jacobian
276
23k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
14
1.5k
Making the Leap to Tech Lead
cromwellryan
133
9.3k
Producing Creativity
orderedlist
PRO
345
40k
Facilitating Awesome Meetings
lara
54
6.4k
Six Lessons from altMBA
skipperchong
28
3.8k
Adopting Sorbet at Scale
ufuk
76
9.4k
Designing for Performance
lara
608
69k
The Pragmatic Product Professional
lauravandoore
34
6.7k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Transcript
チームで採用しているriverpodを使った Flutterのアーキテクチャとriverpod v1.0.0 b4tchkn Flutter x Kotlin Multiplatform by CyberAgent
#4 2021/08/06 #ca_flutter_kmm
About me Kakeru Nakabachi batch(@b4tchkn) 2
今日のゴール • ちょっとこの部分参考にできるかも • riverpodで状態管理いいかも • CAもFlutterで色々やってるんだな👀 3
アジェンダ • riverpodの簡単な紹介 • チームのFlutterプロジェクトアーキテクチャ • riverpod使用ルールについて 4
riverpod 5
• もともとあった、Providerという状態管理ライブラリの問題点を解消したやつ • DIもこれで実現できる • テスタブルなコードを保証してくれる • 最近 v1.0.0に乗り換え •
hooks_riverpod • flutter_riverpod • riverpod https://riverpod.dev/docs/getting_started/ riverpod 6
• もともとあった、Providerという状態管理ライブラリの問題点を解消したやつ • DIもこれで実現できる • テスタブルなコードを保証してくれる • 最近 v1.0.0に乗り換え •
hooks_riverpod • flutter_riverpod • riverpod https://riverpod.dev/docs/getting_started/ riverpod 7
hooks_riverpod flutter_hooksと併用する使い方 HookConsumerWidgetを使って中でref.watchなど便利メソッドが呼べる 8
hooks_riverpod 公式にも載ってる簡単なサンプル 9
hooks_riverpod riverpodを使うプロジェクトではAppを ProviderScopeでラップする 10
hooks_riverpod Stringを配るProvider 11
hooks_riverpod ProviderをWidget内で監視 12
hooks_riverpod riverpod v1.0.0での割と大きな変更点 13
チームのFlutterアーキテクチャ 14
全体像 15 UI State Domain Data
全体像 16 UI State Domain Data
• Service ◦ DioとRetrofitを使った RemoteDataSource ◦ 定義したabstract class(interface)から実 際にリクエストするコードを生成 •
Database ◦ SharedPreferencesを使った LocalDataSource ◦ Key - Valueでデータを永続化 同ドメインに関わる複数のメソッドを定義できる getArticle(String id)とか Data 17
Data • 実際にリクエストするメソッド 18
Data • Dioの依存をriverpodのProviderを使ってDI • Dioに依存したdatasourceのインスタンスをProviderで配布 19
全体像 20 UI State Domain Data
Domain ビジネスオブジェクトを含む、アプリケーションの中核となるレイヤー メソッドは1つしか実装できない UseCaseは他のUseCaseへの参照はできない Stateが複数UseCaseを持つのはOK 21
Domain UseCaseはDataSourceに依存 22
Domain UseCaseはDataSourceに依存 DataSourceで定義したProviderを 使ってUseCaseのインスタンスを配 布する際にDIして提供する 23
Domain DataSourceのコールにパラメータが必要 な場合 24
Domain DataSourceのコールにパラメータが必要 な場合 パラメータが1つでもUseCaseParamのオ ブジェクトを作ってUseCaseに渡す 25
全体像 26 UI State Domain Data
State 1つの状態だけを持つViewModel的な存在 Recoilの思想を取り入れて、1つのStateの粒度を可能な限り小さくする 27 https://recoiljs.org/
State StateのProviderを作る時はStateNotifierProviderを使う 28
State 29 トップ画面 記事一覧画面
State UseCaseの依存解決にParamが必要な場合 familyを使ってProviderを作るパラメータを増やす このときParamが変更されると古いParamを持ったProviderは再利用されず溜まってい き、メモリリークの原因となるためautoDisposeもセットで使う 30
Selector Stateをなにかしら計算してUIに渡したいときに定義 複数のStateを参照して計算した値をSelectorで定義してUIに配布もできる 31
State よくあるStateの動き 32
State よくあるStateの動き 33 loading Request Request
よくあるStateの動き State 34 loading Data Data
State よくあるStateの動き 35 idle(loaded) Data Data Data
State よくあるStateの動き(異常系) 36 idle(loaded) Error Data Data
State これらの状態をAsycEntity、 AsyncStateNotifierで表現 37
全体像 38 UI State Domain Data
UI - Connected Screen StatefulなPage StateとStatelessなHogePageを繋ぎこむ役目 StateProviderの保持と、loadingなどの状態に よってWidgetを出し分けるため DefaultContainerでAsyncEntityの値を処理す る
39
UI - Connected Screen DefaultContainer Stateから渡ってきた複数のAsyncEntityの値を処理してWidgetの出し分けを担う 40 ロード中 ロード終了 エラー発生
UI - Stateless Screen StateをもたないWidget群 • ListView • TextView •
Container • Column • … 41
riverpod使用ルール 42
riverpod使用ルール Providerの作り方はたくさんある • Provider • StreamProvider • StateProvider • StateNotifierProvider
• FutureProvider https://riverpod.dev/docs/concepts/providers 43
Providerのreadの仕方もいっぱいある https://riverpod.dev/docs/concepts/reading riverpod使用ルール 44
riverpod使用ルール ルール①:FutureProvider / StreamProviderの代わりに StateNotifierProvider+AsyncStateNotifier 45 NG OK
riverpod使用ルール ルール②:StateProviderの代わりにStateNotifierProvider+StateController 46 NG OK
riverpod使用ルール ルール③:Provider作成時はref.readは使わないでref.watchのみで統一 47 NG OK
riverpod使用ルール ▪ まとめ 1. FutureProvider / StreamProviderの代わりに StateNotifierProvider+AsyncStateNotifier 2. StateProviderの代わりにStateNotifierProvider+StateController
➢ プロジェクトで使うProviderをProviderとStateNotifierProviderに制限 3. Provider作成時はref.readは使わないでref.watchのみで統一 ➢ 依存しているProviderが再生成されたときに、変化した値を購読できるよ うにするため ➢ 設計の統一性、Providerの依存を見やすくする 48
参考リンク 49 • https://riverpod.dev/docs/getting_started • https://recoiljs.org/ • https://zenn.dev/riscait/books/flutter-riverpod-practical-introduction/viewer/mig rate-to-v1
Thank you 50