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:

Flutter

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

Dart only

pubspec.yaml

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

dependencies:
  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 dart 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":

Flutter

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.
@riverpod
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 {
  @override
  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.

Dart only

lib/main.dart

import 'package:riverpod/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.
@riverpod
String helloWorld(HelloWorldRef ref) {
  return 'Hello world';
}

void main() {
  // This object is where the state of our providers will be stored.
  final container = ProviderContainer();

  // Thanks to "container", we can read our provider.
  final value = container.read(helloWorldProvider);

  print(value); // Hello world
}

Which you can then execute with dart lib/main.dart.
This will print "Hello world" in the console.

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

Choose your next step

Learn some basic concepts:

• Learn more about providers

Follow a cookbook:

• How to test providers