Chapter 06無料公開

Riverpodの使い方

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

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


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

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

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

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

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

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

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

分解して意味を解説

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

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

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

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

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

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

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


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