Flutter x Riverpodで状態管理してみる

環境

• M1, MacOS BigSur 11.4
• Flutter 2.5.1
• Dart 2.14.2
• flutter_riverpod 0.14.0

プロジェクト作成

以下のコマンドでプロジェクトを作成

flutter create riverpod_sample

flutter_riverpodインストール

flutter pub add flutter_riverpod

各々のクラス作成

さて、Riverpodを使う準備ができました。ここから、必要なクラスの作成を進めていきます。

Providerクラス

まずは状態を管理するProviderクラスを作成します。ここではシンプルに、intを管理するクラスを作成します。

引数として入ってきた数値を元の数値に加算する、というものです。

import 'package:flutter_riverpod/flutter_riverpod.dart';

class SampleStateProvider extends StateNotifier<int> {
  SampleStateProvider() : super(0);
  void add(int num) {
    state = state + num;
  }
}

Providerクラスを管理するクラス作成

シングルトンパターンを使います。

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_sample/sample_provider.dart';

class SampleProviderBase {

  final sampleStateProvider = StateNotifierProvider<SampleStateProvider, int>((ref) => SampleStateProvider());
   
  static SampleProviderBase? _instance;
  static SampleProviderBase? get instance {
    return _instance ??= SampleProviderBase();
  }
}

データの出し入れ

状態データ格納

SampleStateProviderで用意したaddメソッドの使い方はこんな感じになります。

context.read(SampleProviderBase.instance!.sampleStateProvider.notifier).add(1);

状態取得

状態を取得するにはこんなふうにします。

Consumer(builder: (context, watch, child) {
  int stateNum = watch(SampleProviderBase.instance!.sampleStateProvider);
  ...
  ...
}

デフォルトのカウンターアプリに組み込んでみる

デフォルトのmain.dartにこれを組み込んでみます。

// main関数
void main() {
  runApp(
    const ProviderScope(
      child: MyApp()
    )
  );
}

...
...
...

数値の表示部分
Consumer(
  builder: (context, watch, child) { 
    int stateNum = watch(SampleProviderBase.instance!.sampleStateProvider);
    return Text(
      stateNum.toString(),
      style: Theme.of(context).textTheme.headline4,
    );
  }
)