Skip to main content

Getting started


Try Riverpod online

To get a feel of Riverpod, try it online on Dartpad.

Installing the package

Once you know what package you want to install, proceed to add the following to your pubspec.yaml:

pubspec.yaml

name: my_app_name
environment:
sdk: ">=2.17.0 <3.0.0"
flutter: ">=3.0.0"

dependencies:
flutter:
sdk: flutter
flutter_riverpod: ^2.3.1
riverpod_annotation: ^2.0.1

dev_dependencies:
build_runner:
custom_lint:
riverpod_generator: ^2.1.3
riverpod_lint: ^1.1.5

Then install packages with flutter pub get.

Finally, run the code-generator with flutter pub run build_runner watch

That's it. You've added Riverpod to your app!

Usage example: Hello world

Now that we have installed Riverpod, we can start using it.

The following snippets showcase how to use our new dependency to make a "Hello world":

lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

part 'main.g.dart';

// We create a "provider", which will store a value (here "Hello world").
// By using a provider, this allows us to mock/override the value exposed.

String helloWorld(HelloWorldRef ref) {
return 'Hello world';
}

void main() {
runApp(
// For widgets to be able to read providers, we need to wrap the entire
// application in a "ProviderScope" widget.
// This is where the state of our providers will be stored.
ProviderScope(
child: MyApp(),
),
);
}

// Extend ConsumerWidget instead of StatelessWidget, which is exposed by Riverpod
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),
),
),
);
}
}

Which you can then execute with flutter run.
This will render "Hello world" on your device.

Going further: Installing code snippets

If you are using Flutter and VS Code , consider using Flutter Riverpod Snippets

If you are using Flutter and Android Studio or IntelliJ, consider using Flutter Riverpod Snippets

img

Choose your next step

Learn some basic concepts:

Follow a cookbook: