Chapter 06無料公開

Riverpodの基本的な使い方

村松龍之介
村松龍之介
2023.02.23に更新

前章では、「Riverpodの選び方とインストール方法」を解説しました。


アプリのルートにProviderScopeを追加する

Riverpodを使ったProviderの宣言自体はグローバルですが、Providerをアプリ内で利用可能にするために範囲(スコープ)を指定する必要があります。
アプリのルート(デフォルトでは main.dartMyApp()部分)を ProviderScope で囲みます。

main.dart
void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

Providerをグローバル変数として宣言する

さて、まずはアプリ内で使うProviderを作成しましょう。

プロバイダの作成方法には2種類あります。
従来の方法と、コード生成を利用した方法です。

従来の方法

final myProvider = Provider<MyValue>((ref) {
  return MyValue();
});
// ↓ 書き方が違うだけで、上記と同じ意味(アロー構文を使うと簡潔に書くことができます)
final myProvider = Provider((ref) => MyValue());

分解して意味を解説

final myProvider は、定数の宣言です。好きな名前を付けられます。
Providerの状態を読み取るときに myProvider という名前で呼び出して使います。

Provider はRiverpodで使うProviderの種類で、最も基本的なProviderです。
他に StateProviderStateNotifierProvider など数種類のProviderが用意されています。

<MyValue> 部分は型の宣言です。このProviderは MyValue という型を返す、ということを明示しています。

((ref) { return MyValue(); }); では、 ref という引数を受け取り、 MyValue() という値を返しています。
ref を使うと、他のProviderを読み取ったりできます。
ref を使用しない場合は ((_) { return MyValue(); }); のように「アンダースコア」を使って省略しても構いません。

コード生成を用いた方法

part 'my_provider.g.dart';


MyValue my(MyRef ref) {
  return MyValue();
}

分解して意味を解説

コード生成を使用するので、 part: '{file_name}.g.dart'; の宣言が必須です。

@riverpod アノテーションをつけて、プロバイダ生成のためのメソッドであることを示します。

行頭の、関数の戻り値である MyValue はプロバイダが提供する値の型になります。

関数名である my はプロバイダの名前になります。
設定で変更することもできますが、コード生成を行うと末尾に Provider が自動で付くので、 myProvider という名前になります。

関数のパラメータである (MyRef ref) はコード生成される MyRef を関数内で使用するためのものです。コード生成前はコンパイルエラーになりますが、コード生成を実行すれば生成されるものなので問題ありません。

あとは従来の記法と同じく、関数内で値を返しましょう。


Providerはグローバルに宣言しますが、不変であり、テストと保守が可能です。

従来の package:provider と違い、 Riverpod では、同じ型のProviderを複数公開できます。

final cityProvider = Provider((ref) => 'Tokyo');
final countryProvider = Provider((ref) => 'Japan');

↑どちらも String 型のProviderですが、それぞれ別の名前を付けて宣言しているので全く問題ありません。


次章では、「各Providerの役割と使い分け」を解説します。