Chapter 31無料公開

[v1-dev] 各Providerの役割と使い分け

村松龍之介
村松龍之介
2021.07.23に更新
このチャプターの目次

前章では、「Riverpodの使い方」を解説しました。


RiverpodのProviderには以下のように複数種類あり、適材適所で使い分ける必要があります。

  • Provider
    最も基本的なProvider
  • StateProvider
    外部から変更可能な状態を提供する
  • StateNotifierProvider
    外部から変更可能な状態と、状態操作メソッドクラスを提供する
  • FutureProvider
    非同期で取得した値を提供する
  • StreamProvider
    断続的に最新の値を提供する
  • ScopedProvider
    特定の範囲に絞った利用ができるProvider
  • ChangeNotifierProvider
    外部から変更可能な状態と、状態操作メソッドクラスを提供する

本章では ConsumerWidget を使用した例となっています。
Flutter Hooks の機能を同クラスで併用する場合は、以下のように継承するWidgetクラスを書き換えてください。


ConsumerWidget -> HookConsumerWidget

この章ではまず、Providerのみを解説します。
それ以外のProviderについては次章以降で一つずつ解説して参ります。

Provider - 最も基本的なProvider

(外部からは)変更できない値を公開できる基本的なProviderです。

// Providerの定数をグローバルに宣言
final appNameProvider = Provider((ref) => 'My TODO');

// 〜中略〜 buildメソッド
Widget build(BuildContext context, WidgetRef ref) {
  // Providerを読み取る。
  final appName = ref.watch(appNameProvider);

  return Scaffold(
    // Providerの値を使用して表示
    appBar: AppBar(title: Text(appName)),
    body: ListView(
      children: [
        ...省略
      ],
    ),
  );
}

内部からは変更でき、 watch していれば、その変更は再構築を促します。

final counterProvider = StateProvider((ref) => 0);

final previousCounterProvider = Provider((ref) {
  final counter = ref.watch(counterProvider).state;
  return counter - 1;
});

// 〜中略〜 buildメソッド
Widget build(BuildContext context, WidgetRef ref) {
  // previousCounterProvider を読み取る。
  // counterProvider の状態が更新されると previousCounterProvider も変更され、再構築される。
  final previousCount = ref.watch(previousCounterProvider).state;

  return Scaffold(
    // previousCounterProvider の値を表示
    body: Text('前回の値:$previousCount'),
  );
}