Getting started

import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; import CodeBlock from "@theme/CodeBlock"; import pubspec from "./getting_started/pubspec"; import dartHelloWorld from "./getting_started/dart_hello_world"; import pubadd from "./getting_started/pub_add"; import helloWorld from "./getting_started/hello_world"; import dartPubspec from "./getting_started/dart_pubspec"; import dartPubadd from "./getting_started/dart_pub_add"; import { AutoSnippet, } from "/src/components/CodeSnippet"; import { Link } from "/src/components/Link";

Try Riverpod online

To get a feel of Riverpod, try it online on Dartpad or on Zapp:

Installing the package

Riverpod comes as a main "riverpod" package that’s self-sufficient, complemented by optional packages for using code generation (<Link documentID="concepts/about_code_generation" />) and hooks (<Link documentID="concepts/about_hooks" />).

:::caution For the sake of being compatible with the latest json_serializable package, some Riverpod packages are currently only compatible with Flutter's beta channel or later.

If pub get is failing due to version solving issues, consider switching to the beta channel by running:

flutter channel beta

Or consider downgrading Riverpod to <=3.1.0. :::

Once you know what package(s) you want to install, proceed to add the dependency to your app in a single line like this:

<Tabs groupId="riverpod" defaultValue="flutter_riverpod" values={[ { label: 'Flutter', value: 'flutter_riverpod', }, { label: 'Dart only', value: 'riverpod', }, ]}

<AutoSnippet {...pubadd}></AutoSnippet>

<AutoSnippet {...dartPubadd}></AutoSnippet>

Alternatively, you can manually add the dependency to your app from within your pubspec.yaml:

<Tabs groupId="riverpod" defaultValue="flutter_riverpod" values={[ { label: 'Flutter', value: 'flutter_riverpod', }, { label: 'Dart only', value: 'riverpod', }, ]}

<AutoSnippet title="pubspec.yaml" language="yaml" {...pubspec}></AutoSnippet>

Then, install packages with flutter pub get.

<AutoSnippet title="pubspec.yaml" language="yaml" {...dartPubspec}

</AutoSnippet>

Then, install packages with dart pub get.

:::info If using code-generation, you can now run the code-generator with:

dart run build_runner watch -d

:::

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

Enabling riverpod_lint

Riverpod comes with an optional riverpod_lint package that provides lint rules to help you write better code, and provide custom refactoring options.

Riverpod_lint is implemented using analysis_server_plugin. As such, it is installed through analysis_options.yaml

Long story short, create an analysis_options.yaml next to your pubspec.yaml and add:

plugins:
  riverpod_lint: <latest version from https://pub.dev/packages/riverpod_lint>

You should now see warnings in your IDE if you made mistakes when using Riverpod in your codebase.

To see the full list of warnings and refactorings, head to the riverpod_lint page.

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

export const foo = 42;

<Tabs groupId="riverpod" defaultValue="flutter_riverpod" values={[ { label: "Flutter", value: "flutter_riverpod" }, { label: "Dart only", value: "riverpod" }, ]}

<AutoSnippet title="lib/main.dart" language="dart" {...helloWorld}

</AutoSnippet>

Then, start the application with flutter run.
This will render "Hello world" on your device.

<AutoSnippet title="lib/main.dart" language="dart" {...dartHelloWorld}

</AutoSnippet>

Then, start the application 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