Riverpodはじめるときメモ【備忘】

はじめに

Riverpodは、Flutterにおける状態管理を簡単かつ安全に行うためのライブラリ。Providerを通じて状態を管理し、アプリケーション全体で共有できる。

依存関係

'pubspec.yaml' に次の依存関係を追加する。

yaml

dependencies:
  flutter:
    sdk: flutter
  flutter_riverpod: ^2.6.1 //最新のバージョンを確認して指定

最新のバージョンは以下のリンクから確認↓

次に、ターミナルで以下のコマンドを実行して依存関係をインストールする↓

bash

flutter pub get

main.dart

アプリケーションのエントリーポイントとなる main.dart ファイルを以下のように記述する。

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(
    ProviderScope( // ProviderScopeで全体をラップ
      child: MyApp(),
    ),
  );
}

ProviderScopeでアプリ全体をラップすることでRiverPodが状態を管理できるようになる。

プロバイダーの作成

Riverpodでは、状態を管理するためにProviderを定義ずる。プロバイダーは次の形式で記述可能。

final プロバイダー名 = プロバイダータイプ<返却するデータ型>(初期値);

インスタンスを管理するプロバイダーの例

以下は、SharedPreferences のインスタンスを管理するプロバイダーの例。このプロバイダーでは、非同期でデータを取得するために FutureProvider を使用する。

sharedPreferencesProvider.dart

import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final sharedPreferencesProvider =
    FutureProvider<SharedPreferences>((ref) async {
  return await SharedPreferences.getInstance();
});

プロバイダー名: sharedPreferencesProvider
プロバイダータイプ: FutureProvider
返却するデータ型: SharedPreferences
初期値: async コールバック内でのSharedPreferences.getInstance()

カウンターの値を管理するプロバイダー

次に、カウンターの値を管理するプロバイダーの例を示す。

counter_provider.dart

final counterProvider = NotifierProvider<CounterNotifier, int>(CounterNotifier.new);

プロバイダー名: counterProvider
プロバイダータイプ: NotifierProvider
返却するデータ型: int
初期値: CounterNotifier.new

Notifierの作成

Riverpodにおける Notifier は、状態を管理・変更するためのクラス。Provider と組み合わせて使うことで、アプリ全体で状態を安全に共有できる

counter_notifier.dart

import 'package:flutter_riverpod/flutter_riverpod.dart';
// カウンターの状態を管理するNotifier
class CounterNotifier extends Notifier<int> {
 @override
 int build() => 0; // 初期値を0に設定
 void increment() => state++;
 void decrement() => state--;
 void reset() => state = 0;
}

リスナーの作成

final count = ref.watch(counterProvider);