getting_started.mdx

title	pagination_next	version
Getting started	essentials/first_request	5

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, When, } 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:

<iframe src="https://zapp.run/edit/zv2060sv306?theme=dark&lazy=false" style={{ width: "100%", border: 0, overflow: "hidden", aspectRatio: "1.5" }} ></iframe>

Installing the package

Once you know what package 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 {...dartPubadd}>

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}>

Then, install packages with flutter pub get.

You can now run the code-generator with{" "} dart run build_runner watch.

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

Then, install packages with dart pub get.

You can now run the code-generator with{" "} dart run build_runner watch.

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

Enabling riverpod_lint/custom_lint

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

The package should already be installed if you followed the previous steps, but a separate step is necessary to enable it.

To enable riverpod_lint, you need add an analysis_options.yaml placed next to your pubspec.yaml and include the following:

{`analyzer: plugins: - custom_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.

:::note Those warnings will not show-up in the dart analyze command.
If you want to check those warnings in the CI/terminal, you can run the following:

dart run custom_lint

:::

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}

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

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

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

Choose your next step

Learn some basic concepts:

Follow a cookbook: