チームで採用しているriverpodを使ったFlutterのアーキテクチャとriverpod v1.0.0

Slide 1

Slide 1 text

チームで採用しているriverpodを使った Flutterのアーキテクチャとriverpod v1.0.0 b4tchkn Flutter x Kotlin Multiplatform by CyberAgent #4 2021/08/06 #ca_flutter_kmm

Slide 2

Slide 2 text

About me Kakeru Nakabachi batch(@b4tchkn) 2

Slide 3

Slide 3 text

今日のゴール ● ちょっとこの部分参考にできるかも ● riverpodで状態管理いいかも ● CAもFlutterで色々やってるんだな👀 3

Slide 4

Slide 4 text

アジェンダ ● riverpodの簡単な紹介 ● チームのFlutterプロジェクトアーキテクチャ ● riverpod使用ルールについて 4

Slide 5

Slide 5 text

riverpod 5

Slide 6

Slide 6 text

● もともとあった、Providerという状態管理ライブラリの問題点を解消したやつ ● DIもこれで実現できる ● テスタブルなコードを保証してくれる ● 最近 v1.0.0に乗り換え ● hooks_riverpod ● flutter_riverpod ● riverpod https://riverpod.dev/docs/getting_started/ riverpod 6

Slide 7

Slide 7 text

Slide 8

Slide 8 text

hooks_riverpod flutter_hooksと併用する使い方 HookConsumerWidgetを使って中でref.watchなど便利メソッドが呼べる 8

Slide 9

Slide 9 text

hooks_riverpod 公式にも載ってる簡単なサンプル 9

Slide 10

Slide 10 text

hooks_riverpod riverpodを使うプロジェクトではAppを ProviderScopeでラップする 10

Slide 11

Slide 11 text

hooks_riverpod Stringを配るProvider 11

Slide 12

Slide 12 text

hooks_riverpod ProviderをWidget内で監視 12

Slide 13

Slide 13 text

hooks_riverpod riverpod v1.0.0での割と大きな変更点 13

Slide 14

Slide 14 text

チームのFlutterアーキテクチャ 14

Slide 15

Slide 15 text

全体像 15 UI State Domain Data

Slide 16

Slide 16 text

全体像 16 UI State Domain Data

Slide 17

Slide 17 text

● Service ○ DioとRetrofitを使った RemoteDataSource ○ 定義したabstract class(interface)から実際にリクエストするコードを生成 ● Database ○ SharedPreferencesを使った LocalDataSource ○ Key - Valueでデータを永続化同ドメインに関わる複数のメソッドを定義できる getArticle(String id)とか Data 17

Slide 18

Slide 18 text

Data ● 実際にリクエストするメソッド 18

Slide 19

Slide 19 text

Data ● Dioの依存をriverpodのProviderを使ってDI ● Dioに依存したdatasourceのインスタンスをProviderで配布 19

Slide 20

Slide 20 text

全体像 20 UI State Domain Data

Slide 21

Slide 21 text

Domain ビジネスオブジェクトを含む、アプリケーションの中核となるレイヤーメソッドは1つしか実装できない UseCaseは他のUseCaseへの参照はできない Stateが複数UseCaseを持つのはOK 21

Slide 22

Slide 22 text

Domain UseCaseはDataSourceに依存 22

Slide 23

Slide 23 text

Domain UseCaseはDataSourceに依存 DataSourceで定義したProviderを使ってUseCaseのインスタンスを配布する際にDIして提供する 23

Slide 24

Slide 24 text

Domain DataSourceのコールにパラメータが必要な場合 24

Slide 25

Slide 25 text

Domain DataSourceのコールにパラメータが必要な場合パラメータが1つでもUseCaseParamのオブジェクトを作ってUseCaseに渡す 25

Slide 26

Slide 26 text

全体像 26 UI State Domain Data

Slide 27

Slide 27 text

State 1つの状態だけを持つViewModel的な存在 Recoilの思想を取り入れて、1つのStateの粒度を可能な限り小さくする 27 https://recoiljs.org/

Slide 28

Slide 28 text

State StateのProviderを作る時はStateNotifierProviderを使う 28

Slide 29

Slide 29 text

State 29 トップ画面記事一覧画面

Slide 30

Slide 30 text

State UseCaseの依存解決にParamが必要な場合 familyを使ってProviderを作るパラメータを増やすこのときParamが変更されると古いParamを持ったProviderは再利用されず溜まっていき、メモリリークの原因となるためautoDisposeもセットで使う 30

Slide 31

Slide 31 text

Selector Stateをなにかしら計算してUIに渡したいときに定義複数のStateを参照して計算した値をSelectorで定義してUIに配布もできる 31

Slide 32

Slide 32 text

State よくあるStateの動き 32

Slide 33

Slide 33 text

State よくあるStateの動き 33 loading Request Request

Slide 34

Slide 34 text

よくあるStateの動き State 34 loading Data Data

Slide 35

Slide 35 text

State よくあるStateの動き 35 idle(loaded) Data Data Data

Slide 36

Slide 36 text

State よくあるStateの動き（異常系） 36 idle(loaded) Error Data Data

Slide 37

Slide 37 text

State これらの状態をAsycEntity、 AsyncStateNotifierで表現 37

Slide 38

Slide 38 text

全体像 38 UI State Domain Data

Slide 39

Slide 39 text

UI - Connected Screen StatefulなPage StateとStatelessなHogePageを繋ぎこむ役目 StateProviderの保持と、loadingなどの状態によってWidgetを出し分けるため DefaultContainerでAsyncEntityの値を処理する 39

Slide 40

Slide 40 text

UI - Connected Screen DefaultContainer Stateから渡ってきた複数のAsyncEntityの値を処理してWidgetの出し分けを担う 40 ロード中ロード終了エラー発生

Slide 41

Slide 41 text

UI - Stateless Screen StateをもたないWidget群 ● ListView ● TextView ● Container ● Column ● … 41

Slide 42

Slide 42 text

riverpod使用ルール 42

Slide 43

Slide 43 text

riverpod使用ルール Providerの作り方はたくさんある ● Provider ● StreamProvider ● StateProvider ● StateNotifierProvider ● FutureProvider https://riverpod.dev/docs/concepts/providers 43

Slide 44

Slide 44 text

Providerのreadの仕方もいっぱいある https://riverpod.dev/docs/concepts/reading riverpod使用ルール 44

Slide 45

Slide 45 text

riverpod使用ルールルール①：FutureProvider / StreamProviderの代わりに StateNotifierProvider＋AsyncStateNotifier 45 NG OK

Slide 46

Slide 46 text

riverpod使用ルールルール②：StateProviderの代わりにStateNotifierProvider＋StateController 46 NG OK

Slide 47

Slide 47 text

riverpod使用ルールルール③：Provider作成時はref.readは使わないでref.watchのみで統一 47 NG OK

Slide 48

Slide 48 text

riverpod使用ルール ■ まとめ 1. FutureProvider / StreamProviderの代わりに StateNotifierProvider＋AsyncStateNotifier 2. StateProviderの代わりにStateNotifierProvider＋StateController ➢ プロジェクトで使うProviderをProviderとStateNotifierProviderに制限 3. Provider作成時はref.readは使わないでref.watchのみで統一 ➢ 依存しているProviderが再生成されたときに、変化した値を購読できるようにするため ➢ 設計の統一性、Providerの依存を見やすくする 48

Slide 49

Slide 49 text

参考リンク 49 ● https://riverpod.dev/docs/getting_started ● https://recoiljs.org/ ● https://zenn.dev/riscait/books/flutter-riverpod-practical-introduction/viewer/mig rate-to-v1

Slide 50

Slide 50 text

Thank you 50