mcpField
R
riverpod-providers

riverpod-providers

github.com/serverpodDevelopment10124 installsUpdated 34w ago
Repository

About riverpod-providers

riverpod-providers is a skill guide for developers using Riverpod in Dart and Flutter. It explains provider variants, manual and generated declarations, and how to read or update provider state.

Key features

  1. 01Choose providers by return type and mutability
  2. 02Declare providers manually or with code generation
  3. 03Use Notifier classes for mutable state
  4. 04Read and watch providers in Flutter
  5. 05Manage providers with Dart containers

Use cases

  1. 01Choosing a provider for fetched data
  2. 02Sharing computed values across widgets
  3. 03Updating UI state through a Notifier
  4. 04Using Riverpod outside Flutter

Install

Copy the command and run it in a terminal.

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

After installing, type/riverpod-providersin Claude Code to confirm it loaded.

Bundled filesreference.md

Details

From the project README

Riverpod — Providers

Instructions

Providers are the central feature of Riverpod: memoized functions that cache their result and let multiple widgets (or other providers) access the same value. They are declared as top-level final variables. State lives in a ProviderContainer (or ProviderScope in Flutter), not in the provider itself.

Provider variants
SynchronousFutureStream
UnmodifiableProviderFutureProviderStreamProvider
ModifiableNotifierProviderAsyncNotifierProviderStreamNotifierProvider
  • Sync vs Future vs Stream: Match the return type of your function (int, Future<T>, Stream<T>).
  • Unmodifiable: Widgets only read the value. Use for computed or fetched data.
  • Modifiable: Expose a Notifier with a build() method and custom methods; widgets call ref.read(provider.notifier).someMethod(). Use when the UI must update state.

Pick the type based on what you want to return; the provider type follows naturally. FutureProvider / AsyncNotifierProvider are the most common.

Creating a provider (unmodifiable / functional)

Manual:

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

Code generation: Annotate a top-level function with @riverpod. First parameter must be Ref ref. The generated provider name is functionNameProvider.

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

Modifiers: .autoDispose (or @Riverpod(keepAlive: true) to disable) and .family for parameters. See riverpod-auto-dispose and riverpod-family.

Creating a provider (modifiable / Notifier)

Manual: Use a NotifierProvider (or AsyncNotifierProvider / StreamNotifierProvider) with a Notifier class that extends Notifier<T>, AsyncNotifier<T>, or StreamNotifier<T>. Override build(); do not put logic in the constructor (ref/state are not available yet). Public methods are called via ref.read(provider.notifier).method().

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

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

  void increment() => state++;
}

Code generation: Annotate a class that extends _$ClassName. Override build(); add custom methods. Same rule: no logic in the constructor.

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

  void increment() => state++;
}
Using providers
  1. Flutter: Wrap the app in ProviderScope. Use Consumer, ConsumerWidget, or ConsumerStatefulWidget to get a ref and call ref.watch(provider) or ref.read(provider).
  2. Dart only: Create a ProviderContainer(), then container.read(provider) or container.listen(...). Call container.dispose() when done.
  3. Inside another provider: Use the Ref passed to the provider function (or this.ref in a Notifier) to ref.watch / ref.read other providers.

Example in a widget:

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

You can declare multiple providers that return the same type; they are independent. For more detail on Ref, containers, modifiers, and notifier rules, see reference.md.

Comments

Markdown supported