メインコンテンツに進む
⚠️The documentation for version 2.0 is in progress. A preview is available at: https://docs-v2.riverpod.dev

はじめに

Riverpod の仕組みについて深掘りする前に、まずはパッケージのインストール方法をご紹介します。 そして Riverpod を使って定番の Hello world を表示させたいと思います。

インストールするパッケージの種類

Riverpod には複数の種類のパッケージがあり、それぞれ使用目的が若干異なります。 どの Riverpod パッケージをインストールするかは作るアプリの形態によります。

こちらはその対応表です。

アプリの形態パッケージ名説明
Flutter のみflutter_riverpodFlutter アプリで Riverpod を使用する場合の基本のパッケージ。
Flutter + flutter_hookshooks_riverpodflutter_hooksRiverpod を併用する場合のパッケージ。
Dart のみ(Flutter は使用しない)riverpodFlutter 関連のクラスをすべて除いた Riverpod パッケージ。

パッケージのインストール方法

インストールするパッケージの種類が決まったら、パッケージ名とそのバージョン番号を次のように pubspec.yaml に追加してください。

pubspec.yaml
environment:
sdk: ">=2.12.0 <3.0.0"
flutter: ">=2.0.0"

dependencies:
flutter:
sdk: flutter
flutter_hooks: ^0.18.0
hooks_riverpod: ^2.1.1

そして flutter pub get コマンドを実行してください。

これで Riverpod がアプリに追加されました!

Hello world の表示

インストールが完了したところで、Riverpod の使用方法を確認していきましょう。

次のサンプルコードを実行すると Hello world が画面に表示されます。

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

// 値(ここでは "Hello world")を格納する「プロバイダ」を作成します。
// プロバイダを使うことで値のモックやオーバーライドが可能になります。
final helloWorldProvider = Provider((_) => 'Hello world');

void main() {
runApp(
// プロバイダをウィジェットで利用するには、アプリ全体を
// `ProviderScope` ウィジェットで囲む必要があります。
// ここに各プロバイダのステート(状態)・値が格納されていきます。
ProviderScope(
child: MyApp(),
),
);
}

// flutter_hooks 併用時は hooks_riverpod の HookConsumerWidget を継承します。
class MyApp extends HookConsumerWidget {

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),
),
),
);
}
}

flutter run コマンドを実行してみてください。 デバイスの画面に Hello world が表示されるはずです。

コードスニペット機能の利用

FlutterVS Code で利用している場合は、拡張機能の Flutter Riverpod SnippetsRiverpod 専用のコードスニペット機能を使うことができます。

FlutterAndroid Studio もしくは IntelliJ で利用している場合は、 Flutter Riverpod Snippets を利用してください。

img

次のステップ

基本コンセプトを学ぶ:

具体的な使用方法を学ぶ: