riverpod-getting-started
Riverpod — Getting Started
Instructions
Installing the package
Riverpod is available as a main package (Flutter: flutter_riverpod; Dart-only: riverpod). Optional packages add code generation and hooks.
Flutter:
flutter pub add flutter_riverpod
With code generation:
flutter pub add flutter_riverpod riverpod_annotation
flutter pub add dev:riverpod_generator build_runner
Dart only:
dart pub add riverpod
With code generation:
dart pub add riverpod riverpod_annotation
dart pub add dev:riverpod_generator build_runner
Manual pubspec.yaml (Flutter):
dependencies:
flutter:
sdk: flutter
flutter_riverpod: ^2.0.0 # use latest from pub.dev
dev_dependencies:
build_runner:
riverpod_generator: ^2.0.0 # if using code generation
Then run flutter pub get (or dart pub get for Dart-only).
If using code generation, run:
dart run build_runner watch -d
Note: Some Riverpod packages may require Flutter's beta channel for compatibility with latest json_serializable. If pub get fails, try flutter channel beta or use Riverpod <=3.1.0.
Wrap the app in ProviderScope
Widgets need a ProviderScope (Flutter) or a ProviderContainer (Dart) to read providers.
Flutter — ProviderScope:
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
void main() {
runApp(
ProviderScope(
child: MyApp(),
),
);
}
Dart only — ProviderContainer:
final container = ProviderContainer();
final value = container.read(helloWorldProvider);
print(value);
// Don't forget to container.dispose() when done
Hello world (Flutter with code generation)
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
part 'main.g.dart';
String helloWorld(Ref ref) {
return 'Hello world';
}
void main() {
runApp(ProviderScope(child: MyApp()));
}
class MyApp extends ConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
final String value = ref.watch(helloWorldProvider);
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Example')),
body: Center(child: Text(value)),
),
);
}
}
Run dart run build_runner build (or watch) to generate main.g.dart. Without code generation, use a manual provider (e.g. final helloWorldProvider = Provider<String>((ref) => 'Hello world');) and the same ProviderScope + ConsumerWidget pattern.
Enabling riverpod_lint
Add the optional linter via analysis_options.yaml:
plugins:
riverpod_lint: ^2.0.0 # use latest from https://pub.dev/packages/riverpod_lint
This provides lint rules and refactorings for Riverpod. See the riverpod_lint package page for the full list.
Going further
- Code generation and hooks: See the riverpod-codegen-and-hooks skill (or docs: About code generation, About hooks).
- VS Code / Android Studio: Consider Flutter Riverpod Snippets extensions for faster boilerplate.
More from serverpod/skills-registry
riverpod-codegen-and-hooks
Use Riverpod code generation (@riverpod, riverpod_generator) and hooks (hooks_riverpod, HookConsumerWidget, flutter_hooks with Riverpod). Use when the user asks about @riverpod, code generation, riverpod_generator, when to use codegen, or using flutter_hooks with Riverpod (HookConsumerWidget, HookConsumer).
25riverpod-providers
Declare and use Riverpod providers (Provider, FutureProvider, StreamProvider, NotifierProvider, AsyncNotifierProvider, StreamNotifierProvider); unmodifiable vs modifiable, top-level declaration, Ref, Notifier build method. Use when creating providers, choosing provider type, writing Notifier classes, or understanding Riverpod state. Use this skill whenever the user asks about Riverpod providers, provider types, or notifiers.
24riverpod-consumers
Use Riverpod Consumer, ConsumerWidget, and ConsumerStatefulWidget to read and watch providers in widgets; WidgetRef, builder ref parameter. Use when building widgets that need to access Riverpod providers, ref.watch or ref.read in the UI, or converting StatelessWidget to ConsumerWidget. Prefer this skill when the user asks how to use providers in Flutter widgets or why ConsumerWidget is required.
19riverpod-auto-dispose
Enable automatic disposal of Riverpod providers when they have no listeners; keepAlive, onDispose, invalidate, ref.keepAlive. Use when preventing memory leaks, caching only while used, or cleaning up resources when a provider is no longer needed. Use this skill when the user asks about auto-dispose, keepAlive, or when to dispose Riverpod state.
17riverpod-refs
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.
16riverpod-pull-to-refresh
Implement pull-to-refresh with Riverpod using RefreshIndicator and ref.refresh; show spinner on initial load, show previous data during refresh, AsyncValue pattern matching. Use when the user asks about pull-to-refresh, RefreshIndicator with Riverpod, or refreshing async providers.
16