【Flutter】StreamProviderについての基礎理解(Riverpod)

Riverpodを使っててたまに使用していたSteamProviderについてまとめました。最近はジェネレーターを使用するProviderが主流になりつつありますが、現場でまだみる方や改めて基礎理解したい方に参考になれば幸いです。

注意
StreamProviderの基礎
StreamProviderの使用方法
ポイントまとめ
最後に

注意

公式で「The content of this page may be outdated.」(このページの内容は古くなっている可能性があります。)とあるようにStreamProviderよりジェネレーターを使ってのProivderを推奨しているみたいなので、参考程度にご覧ください。

StreamProvider | Riverpod

The content of this page may be outdated.

ジェネレーターを使った最新のパターンのProviderの使い方については下記を参考ください。

StreamProviderの基礎

StreamProivderとは

「ストリーム（リアルタイムデータ）」を、Riverpod経由でWidgetに供給するProvider

使用するメリット

変化するデータをUIに渡すので変化がよくあるデータ確認で効果的
- Firebaseの認証状態 (authStateChanges())
- Firestoreのドキュメント監視 (snapshots()) etc..

他のProviderとの違い

Provider	特徴
`Provider`	定数・同期データ。変わらないもの。
`FutureProvider`	1回だけ非同期でデータ取得。
`StreamProvider`	常に流れ続ける非同期データ。リアルタイム。

StreamProviderの使用方法

使い方の基本形

final sampleStreamProvider = StreamProvider<int>((ref) {
  return Stream.periodic(Duration(seconds: 1), (count) => count);
});

これで sampleStreamProvider を呼び出せば、

1秒ごとに 0,1,2,3... と数字が流れてUIが更新されます。

UI側での使い方

final count = ref.watch(sampleStreamProvider);
return count.when(
  data: (value) => Text('値: $value'),
  loading: () => CircularProgressIndicator(),
  error: (err, stack) => Text('エラー: $err'),
);

data → データが来た時
loading → 接続待ちの時
error → ストリームがエラーで止まった時

これで非同期かつリアクティブにUIが更新されます。

よく使うパターン例

Firebase Auth のログイン状態


final authStateProvider = StreamProvider<User?>((ref) {
  return FirebaseAuth.instance.authStateChanges();
});

Firestore ドキュメントのリアルタイム監視

final userDocProvider = StreamProvider.family<DocumentSnapshot, String>((ref, uid) {
  return FirebaseFirestore.instance.collection('users').doc(uid).snapshots();
});

ポイントまとめ

ポイント	説明
`StreamProvider`の役割	ストリームを購読しUIにデータを流す。
`when`で状態分岐	`data / loading / error`を使い分ける。
リアルタイムUI更新が得意	Firebaseやソケット通信に最適。

最後に

簡単にですが、RiverpodのStreamProviderについて深掘りしてみました。
ジェネレーターが流行ってきただけにブラックボックス化しないように基礎理解も大切かなと思います。
どなたかの参考になれば幸いです。

ではまた。