riverpod-refs
Guide for using Ref and WidgetRef in Riverpod to manage state and provider lifecycles.
Install
mkdir -p .claude/skills/riverpod-refs && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18455" && unzip -o skill.zip -d .claude/skills/riverpod-refs && rm skill.zipInstalls to .claude/skills/riverpod-refs
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Use Ref and WidgetRef to read, watch, listen, invalidate, and refresh providers; onDispose and onCancel lifecycle; ref.read vs ref.watch vs ref.listen, ref.invalidate and ref.refresh. Use when interacting with Riverpod providers from widgets or other providers, when to use watch vs read, or when resetting provider state. Use this skill whenever the user asks about ref.watch, ref.read, ref.listen, ref.invalidate, or Riverpod lifecycle.Key capabilities
- →Read provider state declaratively with `ref.watch`
- →Run side effects when provider changes using `ref.listen`
- →Get current provider value without subscribing using `ref.read`
- →Discard current provider state with `ref.invalidate`
- →Invalidate and return new provider value with `ref.refresh`
- →Register lifecycle callbacks with `ref.onDispose` and `ref.onCancel`
How it works
The skill explains how to interact with Riverpod providers using `Ref` and `WidgetRef` for reading, watching, listening, invalidating, refreshing, and managing lifecycle events.
Inputs & outputs
When to use riverpod-refs
- →Implementing reactive state updates in widgets
- →Managing provider side effects
- →Resetting provider state
About this skill
Riverpod — Refs
Instructions
Ref (and WidgetRef in widgets) is how you interact with providers: read state, listen to changes, reset state, and register lifecycle callbacks. Providers get a Ref as the first parameter of their function or as this.ref in a Notifier. Widgets get a WidgetRef via Consumer / ConsumerWidget / ConsumerState.
Obtaining a Ref
- Inside a provider: First parameter of the provider function, or
refproperty in a Notifier. - Inside a widget: Use a Consumer (builder gives
ref), ConsumerWidget (build(context, ref)), or ConsumerStatefulWidget (state hasref). Passrefto other functions if needed.
Listening to state
- ref.watch(provider) — Declarative. Your widget/provider rebuilds when the provider changes. Use this by default in build methods.
- ref.listen(provider, (prev, next) { ... }) — Imperative. Run side effects when the provider changes (e.g. show a dialog, navigate). Safe to use in build; for initState use
ref.listenManualand manage the subscription.
// In a widget
final tick = ref.watch(tickProvider);
return Text('Tick: $tick');
// Side effect when provider changes
ref.listen(tickProvider, (previous, next) {
print('Tick changed from $previous to $next');
});
Reading without listening
- ref.read(provider) — Get current value without subscribing. Use in event handlers (e.g. onPressed), not to "optimize" by avoiding watch. For selective rebuilds use
ref.watch(provider.select((value) => ...)).
onPressed: () {
final tick = ref.read(tickProvider);
print('Current tick: $tick');
}
Resetting state
- ref.invalidate(provider) — Discard current state; provider will recompute on next read. If the provider is listened to, a new state is created.
- ref.refresh(provider) — Same as invalidate + read: invalidates and returns the new value. Use when you need the new value immediately.
ref.invalidate(tickProvider);
// or
final newTick = ref.refresh(tickProvider);
Lifecycle: onDispose, onCancel
Inside a provider you can register callbacks:
- ref.onDispose(callback) — Called when the provider state is destroyed (e.g. auto-dispose or recomputation). Use to close StreamControllers, cancel timers, etc. Do not trigger side effects that modify other providers inside onDispose.
- ref.onCancel(callback) — Called when the last listener is removed (before dispose). ref.onResume(callback) — Called when a listener is added again after onCancel.
final provider = StreamProvider<int>((ref) {
final controller = StreamController<int>();
ref.onDispose(controller.close);
return controller.stream;
});
You can call onDispose multiple times (e.g. one per disposable resource). Return value of onDispose/onCancel can be called to unregister. For more detail and select/listenManual, see reference.md.
When not to use it
- →When not interacting with Riverpod providers
- →When not managing provider state or lifecycle
Limitations
- →The skill is specific to Riverpod framework
- →The skill focuses on `Ref` and `WidgetRef` interactions
- →The skill advises against triggering side effects that modify other providers inside `onDispose`
How it compares
This skill provides specific guidance on Riverpod's reactive state management patterns, offering clear distinctions between `watch`, `read`, and `listen` for effective state interaction.
Compared to similar skills
riverpod-refs side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| riverpod-refs (this skill) | 0 | 4mo | No flags | Intermediate |
| flutter-development | 1,555 | 4mo | No flags | Intermediate |
| flutter-expert | 73 | 3mo | No flags | Advanced |
| flutter | 13 | 3mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by dangdungvn
View all by dangdungvn →You might also like
flutter-development
aj-geddes
Build beautiful cross-platform mobile apps with Flutter and Dart. Covers widgets, state management with Provider/BLoC, navigation, API integration, and material design.
flutter-expert
sickn33
Master Flutter development with Dart 3, advanced widgets, and multi-platform deployment. Handles state management, animations, testing, and performance optimization for mobile, web, desktop, and embedded platforms. Use PROACTIVELY for Flutter architecture, UI implementation, or cross-platform features.
flutter
alinaqi
Flutter development with Riverpod state management, Freezed, go_router, and mocktail testing
mobile-developer
sickn33
Develop React Native, Flutter, or native mobile apps with modern architecture patterns. Masters cross-platform development, native integrations, offline sync, and app store optimization. Use PROACTIVELY for mobile features, cross-platform code, or app optimization.
stac-quickstart
StacDev
Help initialize and validate a Stac-enabled Flutter project and ship a first server-driven screen. Use when users ask to set up Stac CLI, run stac init/build/deploy, verify project prerequisites, or troubleshoot first-run setup and missing configuration files.
mobile-components
dadbodgeoff
Mobile-first UI components including bottom navigation, bottom sheets, pull-to-refresh, and swipe actions. Touch-optimized with proper gesture handling.