FlutterでRiverpodを使った状態管理をする方法をまとめます。

目的

アプリ全体で共有したいデータを管理する方法としてRiverpodを利用します。

Riverpodのインストール

まず、Riverpodをインストールします。
主に2種類あり、flutter_hooksを利用しない場合はflutter_riverpodを、利用する場合はhooks_riverpodをインストールします。

dependencies:
  # flutter_riverpod
  flutter_riverpod: ^2.4.3

  # hooks_riverpodの場合
  hooks_riverpod: ^2.4.3
  flutter_hooks: ^0.20.2

アプリ全体で状態管理

Riverpodで状態管理するために、アプリ全体をProviderScopeウィジェットで囲みます。

import 'package:hooks_riverpod/hooks_riverpod.dart';

void main() {
  runApp(const ProviderScope( // アプリ全体を囲む
    child: MyApp(),
  ));
}

プロバイダ

プロバイダとは

プロバイダは「状態」（データ）をラップして、監視できるようにしてくれるものです。

作成方法

プロバイダにはいくつか種類があります。
いずれもグローバル定数として宣言して使用します。

// グローバル定数として宣言
final myProvider = Provider((ref) {
  return MyValue();
});

void main() {
	...
}

利用方法

プロバイダを利用するにはrefオブジェクトを通して値を取得したり、監視したりします。
このため利用手順としては、1.refオブジェクトを取得し、2.取得したrefオブジェクトから値を利用することになります。

1. refオブジェクトの取得

StatelessWidgetなど通常のウィジェット内ではrefオブジェクトは利用できません。
Riverpodが用意してくれるウィジェットを利用して、その中でrefにアクセスする必要があります。

class SubScreen extends ConsumerWidget { // StatelessWidgetから変更
  const SubScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Container();
  }
}

2. refオブジェクトから値を利用

refオブジェクトからプロバイダの値を利用する方法はいくつかの種類があります。
単純に値を取得するだけなら、ref.read()を利用します。

class SubScreen extends ConsumerWidget {
  const SubScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final counter = ref.read(myProvider); // 単純に値を利用する
    return Container();
  }
}

まとめ

Riverpodで状態管理をするために、プロバイダを定義し、refオブジェクトからアクセスする方法を確認しました。

FlutterでのRiverpodを使った状態管理の基礎

目的