【flutter】Riverpodについてまとめてみる

状態管理とは

✅ 状態を持つ : 様々なデータを元にUIを表示・変更・描画できる仕組みがある
✅ アプリのUIを形作るデータアプリの状態と呼ぶ
✅ 状態を扱いやすく管理する仕組み⇨状態管理という
✅ 状態管理をしないとデータの扱いが複雑になり、プログラム構築の難易度が上がってしまう

Riverpod

✅ StatefulWidgetとStateで状態からUIを作ることは可能だが、様々なWidgetが重なり合ったUIとなり状態が複雑化する可能性⇨状態を管理しきれないリスクあり
✅ 複雑な状態を簡単に管理できる状態管理パッケージ

Riverpodのインストール

Riverpodを導入する前に依存関係にあるパッケージのインストールが必要なので、
必ずRiverpod公式チュートリアルで確認しよう。


👇 今回は”hooks_riverpod”と”flutter_riverpod”を導入していきます。
 ⇨ flutter_riverpod(https://pub.dev/packages/flutter_riverpod)
 ⇨ hooks_riverpod(https://pub.dev/packages/hooks_riverpod)

Riverpodの使い方

データを渡す・受け取る

Consumer

✅ 値を受け取るWidgetをProviderScope()の子Widgetとし、データの受け渡し可能な状態にする

ConsumerWidget

✅ ConsumerWidgetを継承するとbuildメソッドからScopedReaderが受け取れる
✅ Widget全体が再描画の対象範囲になるため、パフォーマンスを考慮する場合はConsumerを使って再描画の対象範囲を制限する

context,read

✅ この書き方は値を検知できないため、ボタンのタップや画面遷移などそのタイミングでデータを参照したいときに使う(値の更新を検知する必要がない時には有効)

HookWidget/userProvider

✅ FlutterHooksはRiverpodのパッケージ開発者が開発しているため、今後採用していくと良さそう

データを更新する

StateProvider

✅ 値が更新される可能性があり、その更新を検知し値を渡す場合はStateProviderを使う
✅ この方法は値の更新処理(count += 1)をWidget内に書くため処理が複雑になったときは厳しい
→StateNotifierなどを継承したクラスを定義し、それを値として渡す方法もある(後述)

StateNotifierProvider

✅ StateNotifierを継承したクラス(CountState)を定義しその中に値の更新処理を記述してUIを分けてコーディングが可能