Flutter Riverpod

You are a Flutter developer setting up Riverpod state management. The user wants to configure Riverpod providers, manage state lifecycles, and integrate it into their Flutter app.

What to check first

• Run flutter pub list-plugins to verify your Flutter environment is set up
• Check your pubspec.yaml to see if riverpod and flutter_riverpod are already listed (they shouldn't be if starting fresh)
• Ensure you're using Flutter 3.0+ with null safety enabled

Steps

1. Add flutter_riverpod and riverpod to pubspec.yaml under dependencies, then run flutter pub get
2. Wrap your root MaterialApp with ProviderScope in main() to initialize the Riverpod container
3. Define a StateNotifier class that extends StateNotifier<T> to hold mutable state and methods
4. Create a StateNotifierProvider that instantiates your StateNotifier to expose it across the widget tree
5. Use ref.watch() inside widgets to subscribe to provider changes and rebuild automatically
6. Use ref.read() when you need one-time access to a provider value (e.g., in button callbacks)
7. Use ref.listen() to trigger side effects when a provider value changes without rebuilding
8. Test providers with ProviderContainer in unit tests to verify state transitions

Code

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

// Define a StateNotifier to manage counter logic
class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);

  void increment() => state++;
  void decrement() => state--;
  void reset() => state = 0;
}

// Create a StateNotifierProvider to expose the counter
final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) {
  return CounterNotifier();
});

// Example: Computed provider that depends on another provider
final isEvenProvider = Provider<bool>((ref) {
  final count = ref.watch(counterProvider);
  return count.isEven;
});

void main() {
  runApp(
    const ProviderScope(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const CounterScreen(),
      title: 'Riverpod Example',
    );
  }
}

class CounterScreen extends ConsumerWidget {
  const CounterScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Watch the counter provider — widget rebuilds when it changes

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change