FlutterとRiverpodを使っていてref.watchを使うのが基本だと思います。
基礎を理解し、他に展開したり有効に活用できればアプリ開発も円滑になると思い「ref.watchについて」「ref.readとの違い」「簡単な実装例」をまとめました。
Riverpodについて深掘りたい方や基礎を学びたい方の参考になれば幸いです。
目次
Riverpodとref.watchについて
rivevpodとは
- 状態管理ライブラリ
- flutterの中でも人気のライブラリ
- 1対1に相性の良いStatefulWidgetやFlutter Hooksに対して１対多の管理に強い
ref.watchとは
- Providerの状態を管理して、変化があれば通知する関数
- Providerはアプリの状態を管理して必要な場所でアクセスする仕組み
- これを使って色々な状態をいろんなファイルで管理が可能
ref.watchとref.readとの違い
ref.watchと同じく頻繁に利用するref.readとの違いについても見てみましょう。
各特徴は以下の通りです。
✅ ref.watch の特徴
- リアクティブに動く → プロバイダの値が変更されたときに 再ビルドが発生 する。
- 主に
buildメソッド内で使用 →WidgetRef refを使って Widget 内でプロバイダの状態を監視する。 - 用途: UI を最新の状態に保ちたいとき
Widget build(BuildContext context, WidgetRef ref) {
final counter = ref.watch(counterProvider);
return Text('$counter');
}✅ref.read の特徴
- 非リアクティブ → 値を「1回だけ」取得。プロバイダが更新されても自動で再ビルドはしない。
- イベントハンドラなど、UI の外で使用するのに適している
- 例えば、ボタンを押したときに状態を変更したい場合など。
- 用途: 状態の変更や、一度だけ値を取り出したいとき
ElevatedButton(
onPressed: () {
ref.read(counterProvider.notifier).state++;
},
child: Text('Increment'),
);比較まとめ
まとめると、イベントやコールバックで要所要所で使うreadとbuildでしっかり管理するwatchようなイメージです。
| 機能 | ref.watch | ref.read |
|---|---|---|
| 再ビルド | あり（値が変わると） | なし |
| 主な用途 | UIで状態を表示・監視 | 値の取得や状態の更新（副作用） |
| 使用場所 | build() 内 | イベント・コールバックなど |
ref.watchの使用例
下記記事にてref.watchの基本的な動きが確認できると思います。
内容としては、以下の通りです。
- State Providerでカウントアップの数字の状態を管理
- ref.watchでカウントの状態を監視
- ref.readを使ってカウントアップをフォロー
最後に
基本的なref.watchの使い方はいかがでしたでしょうか。ref.refreshなど応用ケースなども今後まとめて解説できればと思いますのでよかったらそちらもご覧ください。
Flutter×Riverpodを使用している方に今回の記事が参考になることを願っています。
ではまた。
コメント