前章では、「Riverpodの選び方とインストール方法」を解説しました。
アプリのルートにProviderScopeを追加する
Riverpodを使ったProviderの宣言自体はグローバルですが、Providerをアプリ内で利用可能にするために範囲(スコープ)を指定する必要があります。
アプリのルート(デフォルトでは main.dart
の MyApp()
部分)を ProviderScope
で囲みます。
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です。
他に StateProvider
や StateNotifierProvider
など数種類の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の役割と使い分け」を解説します。