Flutter のパッケージである、flutter_riverpod を使用し、状態管理を実装します。
まずは、flutter_riverpod をインストールします。
ターミナルで、flutter pub add flutter_riverpodを実行します。
さらにターミナルで flutter pub get を実行しましょう。
flutter_riverpod をインポートします。
dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
Flutter のmain()に、ProviderScopeを設定します。
dart
void main() {
runApp(ProviderScope(child: const MyApp()));
}
MyHomePageクラスのStatefulWidgetをConsumerWidgetへ変更します。
dart
class MyHomePage extends ConsumerWidget {
buildにWidgetRef refを追加します。
refで、状態管理しているパラメータを受け取ります。
dart
class MyHomePage extends ConsumerWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
Widget build(BuildContext context, WidgetRef ref) {
次は、状態を管理するプロバイダを作成します。
新しく、counterProvider.dart を作成します。
flutter_riverpod をインポートします。
dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
外部から変更が可能できるように、StateProviderを設定します。
今回は、何もない場合に『0』を設定します。
dart
final StateProvider<int> counterProvider = StateProvider<int>((ref) => 0);
main.dart に戻り、状態管理している数値を画面に表示できるようにします。
Text の内容をrefでcounterProviderを受け取ります。
さらに、counterProviderの値を監視するために、watchで括ります。
dart
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'タップした回数が表示されます:',
),
Text(
ref.watch(counterProvider).toString(),
style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
),
ElevatedButton(
onPressed: () {},
child: Text("タップ"),
)
],
),
),
);
}
タップすると、画面の数字が変わるようにしたいので、ref.read でプロバイダの値を取得します。
dart
@override
Widget build(BuildContext context, WidgetRef ref) {
StateController<int> counter = ref.read(counterProvider.notifier);
onPress に先程設定した counter に値を 1 ずつ追加するようにします。
dart
ElevatedButton(
onPressed: () => counter.state++,
child: Text("タップ"),
)
一通り完成したので、動作確認します。
タップボタンをタップすると、
数値が 1 になりました。
さらにタップしてみると、
タップするたびに数字が上がっていきました。
次に、タップする度に数字が 2 倍になるようにします。
まずは、初期値を 0 から 1 へ変更しておきます。
counterProvider.dart
dart
import 'package:flutter_riverpod/flutter_riverpod.dart';
final StateProvider<int> counterProvider = StateProvider<int>((ref) => 1);
次に main.dart のonPressの部分を、counter.updateにします。
updateのなかに、計算式を入れていきます。
dart
ElevatedButton(
onPressed: () => counter.update((state) => state * 2),
child: Text("タップ"),
)
では、動作確認してみましょう。
タップボタンをタップすると、
1 から 2 へ変更されました。
何度かタップしてみると、
タップする度、2 倍になりました。
