mcpField
R
riverpod-consumers

riverpod-consumers

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

riverpod-consumers について

FlutterのWidgetがConsumer系の型を通じてProviderを読み取り、監視する方法を説明するRiverpodスキルです。状態の要件に応じてConsumer、ConsumerWidget、ConsumerStatefulWidgetを選べます。

主な機能

  1. 01既存のWidgetクラスでConsumerを使用
  2. 02ConsumerWidgetとWidgetRefで構築
  3. 03ConsumerStatefulWidgetでローカル状態を管理
  4. 04Widgetの要件に応じた型の選択
  5. 05refベースのProvider監視の理解

活用シーン

  1. 01StatelessWidgetからProviderを読み取る
  2. 02StatefulWidget内でProviderを監視
  3. 03アニメーションやTabControllerでProviderデータを利用
  4. 04RiverpodのConsumerパターンを選択

インストール

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

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

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

詳細

Riverpod — コンシューマー

手順

コンシューマーは、プロバイダーを読み取ったり監視したりできるように Ref（ここでは WidgetRef）を受け取るウィジェットです。Consumer がないと、ウィジェットはプロバイダーツリーにアクセスできません。

Consumer（builder）

StatelessWidget または StatefulWidget を引き続き拡張したい場合は、Consumer を使用します。builder コールバックは (context, ref, child) を受け取ります。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer(
      builder: (context, ref, _) {
        final value = ref.watch(myProvider);
        return Text(value.toString());
      },
    );
  }
}
ConsumerWidget

StatelessWidget の代わりに ConsumerWidget をサブクラス化します。build メソッドは (BuildContext context, WidgetRef ref) を受け取ります。

class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final value = ref.watch(myProvider);
    return Text(value.toString());
  }
}
ConsumerStatefulWidget + ConsumerState

ライフサイクルやローカル状態などのために State が必要な場合は、ConsumerStatefulWidget と ConsumerState を使用します。State オブジェクトには ref プロパティがあります。

class MyWidget extends ConsumerStatefulWidget {
  @override
  ConsumerState<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends ConsumerState<MyWidget> {
  @override
  Widget build(BuildContext context) {
    final value = ref.watch(myProvider);
    return Text(value.toString());
  }
}
どれを使うべきか
  • Consumer — ウィジェットの基底クラスを変更したくない場合は、すべての用途で使用できます。やや冗長になります。
  • ConsumerWidget — State が不要な場合におすすめです。ネストが1段少なくなります。
  • ConsumerStatefulWidget — TabController やアニメーションなどのために State が必要な場合に使用します。
StatelessWidget + context.watch を使わない理由

Riverpod はプロバイダーの監視に BuildContext を使用しません。これは、ウィジェットが監視を停止したタイミングを把握する必要がある auto-dispose などの機能に支障をきたすためです。Ref ベースのコンシューマーを使うことで、確実な破棄と正しい動作が実現します。hooks_riverpod パッケージには、flutter_hooks で使用する HookConsumerWidget なども用意されています。IDE でのリファクタリング（例：「Convert to ConsumerWidget」）には riverpod_lint を有効にしてください。

コメント

Markdown 対応