Chapter 07

[v0.14.0以下版] StateProviderでシンプルに状態を購読・変更する

村松龍之介
村松龍之介
2023.02.12に更新

StateProvider - 変更可能な状態を公開する

(外部から)変更可能な値を公開できるProvider

現在選択されているアイテムやフィルタリングの状態など、単純な状態を保持するのに適しています。
他のProviderと組み合わせたり、複数の画面からアクセス可能です。

StateProviderの宣言

// Providerの定数をグローバルに宣言
final counterProvider = StateProvider((ref) => 0);

Widgetで使用する

// 〜中略〜 buildメソッド
Widget build(BuildContext context, ScopedReader watch) {
  // Providerを読み取る。watchを使用しているので、
  // Providerの状態が更新されるとbuildメソッドが再実行され、画面が更新される
  final counter = watch(counterProvider);

  return Scaffold(
    body: ElevatedButton(
      // ボタンタップでcounterProviderの状態をプラス1する
      // ↓ `counter.state = counter.state + 1` と書いても同じ
      onTap: () => counter.state++,
      // counterProviderの状態(カウント数)をTextで表示
      child: Text('Current: ${counter.state}'),
    ),
  );
}

StateProvider | Riverpodドキュメントページ
https://pub.dev/documentation/riverpod/latest/riverpod/StateProvider-class.html