riverpod-scoping について
ルート以外の ProviderScope でオーバーライドし、アプリの一部だけで Provider の動作を変える方法を説明する Riverpod スキルです。依存関係の宣言を扱い、スコープ機能は複雑で今後変更される可能性があると注意しています。
主な機能
- 01Provider のスコープ利用を有効化
- 02スコープ依存関係の宣言
- 03サブツリー内で値をオーバーライド
- 04ツリー内での family 引数受け渡しを回避
活用シーン
- 01ページ単位でテーマなどの値を変更
- 02変更されたリスト項目だけを再ビルド
- 03サブツリーに現在の項目 ID を提供
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/riverpod-scopingを入力して読み込まれたか確認します。
詳細
Riverpod — プロバイダーのスコープ設定
手順
スコープ設定とは、ルート以外の ProviderScope でプロバイダーをオーバーライドし、アプリの一部でのみプロバイダーの動作を変更することです。用途としては、ページごとのカスタマイズ（例：あるページだけのテーマ）、パフォーマンスの最適化（例：ListView で変更された項目だけを再ビルドする）、または family パラメーターをツリー内で渡すのを避けることが挙げられます。
注： スコープ設定は複雑で、今後の Riverpod のバージョンで変更される可能性があります。慎重に使用してください。
オプトイン：dependencies
デフォルトではプロバイダーをスコープ設定できません。プロバイダーに dependencies を設定してオプトインします。最初にスコープ設定するプロバイダーでは、通常 dependencies: const [] を指定します。
final currentItemIdProvider = Provider<String?>(
dependencies: const [],
(ref) => null,
);
スコープ設定されたプロバイダーの監視
通常どおり ref.watch/ref.read を使用します。別のプロバイダーがスコープ設定されたプロバイダーを監視する場合、監視する側のプロバイダーでは、スコープ設定されたプロバイダーを dependencies に指定する必要があります。
final currentItemProvider = FutureProvider<Item?>(
dependencies: [currentItemIdProvider],
(ref) async {
final currentItemId = ref.watch(currentItemIdProvider);
if (currentItemId == null) return null;
return fetchItem(id: currentItemId);
},
);
dependencies に指定する必要があるのは、スコープ設定されたプロバイダーだけです。スコープ設定されていないプロバイダーは必要ありません。
スコープ値の設定：overrides
スコープ値を適用するサブツリーをラップする ProviderScope で overrides を使用します。
ProviderScope(
overrides: [
currentItemIdProvider.overrideWithValue('123'),
],
child: const DetailPageView(),
)
これにより、詳細ページでは手動で値を渡さなくても、現在の項目 ID として '123' が認識されます。オーバーライドの構文については、riverpod-overrides を参照してください。