環境

  • 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; } }
Code language: JavaScript (javascript)

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(); } }
Code language: JavaScript (javascript)

データの出し入れ

状態データ格納

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

context.read(SampleProviderBase.instance!.sampleStateProvider.notifier).add(1);
Code language: CSS (css)

状態取得

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

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, ); } )
Code language: JavaScript (javascript)

By admin