mcpField
R
riverpod-providers

riverpod-providers

github.com/serverpod開発10124 回インストール34 週間前に更新
リポジトリ

riverpod-providers について

riverpod-providersは、DartおよびFlutterでRiverpodを使う開発者向けのスキルガイドです。プロバイダーの種類、手動とコード生成による宣言、状態の読み取りや更新方法を説明します。

主な機能

  1. 01戻り値と可変性に応じたプロバイダー選択
  2. 02手動宣言とコード生成
  3. 03Notifierクラスによる状態変更
  4. 04Flutterでのプロバイダーの読み取りと監視
  5. 05Dartコンテナによるプロバイダー管理

活用シーン

  1. 01取得データに使うプロバイダーの選択
  2. 02複数のwidgetで計算値を共有
  3. 03Notifierを通じたUI状態の更新
  4. 04Flutter以外でのRiverpod利用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/serverpod/skills-registry --skill riverpod-providers

インストール後、Claude Code で/riverpod-providersを入力して読み込まれたか確認します。

同梱ファイルreference.md

詳細

Riverpod — プロバイダー

手順

プロバイダーはRiverpodの中心的な機能です。結果をキャッシュし、複数のウィジェット（または他のプロバイダー）が同じ値にアクセスできる、メモ化された関数です。トップレベルのfinal変数として宣言します。状態はプロバイダー自体ではなく、ProviderContainer（FlutterではProviderScope）に保持されます。

プロバイダーの種類
同期FutureStream
変更不可ProviderFutureProviderStreamProvider
変更可能NotifierProviderAsyncNotifierProviderStreamNotifierProvider
  • 同期・Future・Stream：関数の戻り値の型（int、Future<T>、Stream<T>）に合わせます。
  • 変更不可：ウィジェットは値の読み取りのみを行います。計算済みデータや取得したデータに使用します。
  • 変更可能：build()メソッドとカスタムメソッドを持つNotifierを公開します。ウィジェットからref.read(provider.notifier).someMethod()を呼び出します。UIで状態を更新する必要がある場合に使用します。

返したい値に基づいて型を選ぶと、プロバイダーの種類は自然に決まります。FutureProvider／AsyncNotifierProviderが最もよく使われます。

プロバイダーの作成（変更不可／関数型）

手動：

final userProvider = FutureProvider<User>((ref) async {
  final response = await http.get('https://api.example.com/user/123');
  return User.fromJson(response.body);
});

**コード生成：**トップレベル関数に@riverpodを付けます。最初のパラメーターはRef refである必要があります。生成されるプロバイダー名はfunctionNameProviderです。

@riverpod
Future<User> user(Ref ref) async {
  final response = await http.get('https://api.example.com/user/123');
  return User.fromJson(response.body);
}

修飾子：.autoDispose（無効にするには@Riverpod(keepAlive: true)）と、パラメーターを受け取る.familyがあります。riverpod-auto-disposeとriverpod-familyを参照してください。

プロバイダーの作成（変更可能／Notifier）

手動： Notifierクラスを使ってNotifierProvider（またはAsyncNotifierProvider／StreamNotifierProvider）を使用します。このクラスはNotifier<T>、AsyncNotifier<T>、またはStreamNotifier<T>を継承します。build()をオーバーライドします。コンストラクターにロジックを記述しないでください（この時点ではref/stateを使用できません）。パブリックメソッドはref.read(provider.notifier).method()で呼び出します。

final counterProvider = NotifierProvider<CounterNotifier, int>(CounterNotifier.new);

class CounterNotifier extends Notifier<int> {
  @override
  int build() => 0;

  void increment() => state++;
}

コード生成： _$ClassNameを継承するクラスにアノテーションを付けます。build()をオーバーライドし、カスタムメソッドを追加します。同じルールが適用されます。コンストラクターにロジックを記述しないでください。

@riverpod
class CounterNotifier extends _$CounterNotifier {
  @override
  int build() => 0;

  void increment() => state++;
}
プロバイダーの使用
  1. Flutter： アプリをProviderScopeでラップします。Consumer、ConsumerWidget、またはConsumerStatefulWidgetを使ってrefを取得し、ref.watch(provider)またはref.read(provider)を呼び出します。
  2. Dartのみ： ProviderContainer()を作成し、container.read(provider)またはcontainer.listen(...)を呼び出します。使用後はcontainer.dispose()を呼び出します。
  3. 別のプロバイダー内： プロバイダー関数に渡されたRef（またはNotifier内のthis.ref）を使って、他のプロバイダーに対してref.watch／ref.readを呼び出します。

ウィジェットでの例：

return Consumer(
  builder: (context, ref, _) {
    final helloWorld = ref.watch(helloWorldProvider);
    return Text(helloWorld);
  },
);

同じ型を返すプロバイダーを複数宣言できます。それぞれは独立しています。Ref、コンテナー、修飾子、Notifierのルールについて詳しくは、reference.mdを参照してください。

コメント

Markdown 対応