title |
---|
Getting started |
import Tabs from "@theme/Tabs"; import TabItem from "@theme/TabItem"; import CodeBlock from "@theme/CodeBlock"; import helloWorldHooks from "!!raw-loader!/docs/getting_started_hello_world_hooks.dart"; import helloWorldFlutter from "!!raw-loader!/docs/getting_started_hello_world_flutter.dart"; import helloWorldDart from "!!raw-loader!/docs/getting_started_hello_world_dart.dart"; import { trimSnippet } from "../src/components/CodeSnippet";
Before diving into the inner mechanisms of Riverpod, let's start with the basics: Installing Riverpod, then writing a "Hello world".
Before anything, you need to be aware that Riverpod is spread across multiple packages, with slightly different usage.
The variant of Riverpod that you will want to install depends on the app you are making.
You can refer to the following table to help you decide which package to use:
app type | package name | description |
---|---|---|
Flutter only | flutter_riverpod | A basic way of using Riverpod with flutter. |
Flutter + flutter_hooks | hooks_riverpod | A way to use both flutter_hooks and Riverpod together. |
Dart only (No Flutter) | riverpod | A version of Riverpod with all the classes related to Flutter stripped out. |
Once you know what package you want to install, proceed to add the following to your pubspec.yaml
:
<Tabs groupId="riverpod" defaultValue="hooks_riverpod" values={[ { label: 'Flutter + flutter_hooks', value: 'hooks_riverpod', }, { label: 'Flutter', value: 'flutter_riverpod', }, { label: 'Dart only', value: 'riverpod', }, ]}
environment:
sdk: ">=2.17.0 <3.0.0"
flutter: ">=3.0.0"
dependencies:
flutter:
sdk: flutter
flutter_hooks: ^0.18.0
hooks_riverpod: ^2.1.3
Then run flutter pub get
.
environment:
sdk: ">=2.17.0 <3.0.0"
flutter: ">=3.0.0"
dependencies:
flutter:
sdk: flutter
flutter_riverpod: ^2.1.3
Then run flutter pub get
.
environment:
sdk: ">=2.12.0-0 <3.0.0"
dependencies:
riverpod: ^2.1.3
Then run dart pub get
.
That's it. You've added Riverpod to your app!
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="hooks_riverpod" values={[ { label: "Flutter + flutter_hooks", value: "hooks_riverpod" }, { label: "Flutter", value: "flutter_riverpod" }, { label: "Dart only", value: "riverpod" }, ]}
{trimSnippet(helloWorldHooks)}
Which you can then execute with flutter run
.
This will render "Hello world" on your device.
{trimSnippet(helloWorldFlutter)}
Which you can then execute with flutter run
.
This will render "Hello world" on your device.
{trimSnippet(helloWorldDart)}
Which you can then execute with dart lib/main.dart
.
This will print "Hello world" in the console.
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
Learn some basic concepts:
Follow a cookbook: