Flutter のパッケージである、flutter_riverpod を使用し、状態管理を実装します。

まずは、flutter_riverpod をインストールします。

ターミナルで、flutter pub add flutter_riverpodを実行します。

さらにターミナルで flutter pub get を実行しましょう。

flutter_riverpod をインポートします。

import 'package:flutter_riverpod/flutter_riverpod.dart';

Flutter のmain()に、ProviderScopeを設定します。

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

MyHomePageクラスのStatefulWidgetConsumerWidgetへ変更します。

class MyHomePage extends ConsumerWidget {

buildWidgetRef refを追加します。

refで、状態管理しているパラメータを受け取ります。

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 をインポートします。

import 'package:flutter_riverpod/flutter_riverpod.dart';

外部から変更が可能できるように、StateProviderを設定します。

今回は、何もない場合に『0』を設定します。

final StateProvider<int> counterProvider = StateProvider<int>((ref) => 0);

main.dart に戻り、状態管理している数値を画面に表示できるようにします。

Text の内容をrefcounterProviderを受け取ります。

さらに、counterProviderの値を監視するために、watchで括ります。

@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 でプロバイダの値を取得します。

@override
Widget build(BuildContext context, WidgetRef ref) {
  StateController<int> counter = ref.read(counterProvider.notifier);

onPress に先程設定した counter に値を 1 ずつ追加するようにします。

ElevatedButton(
  onPressed: () => counter.state++,
  child: Text("タップ"),
)

一通り完成したので、動作確認します。

image2

タップボタンをタップすると、

image3

数値が 1 になりました。

さらにタップしてみると、

image4

タップするたびに数字が上がっていきました。

次に、タップする度に数字が 2 倍になるようにします。

まずは、初期値を 0 から 1 へ変更しておきます。

counterProvider.dart

import 'package:flutter_riverpod/flutter_riverpod.dart';

final StateProvider<int> counterProvider = StateProvider<int>((ref) => 1);

次に main.dart のonPressの部分を、counter.updateにします。

updateのなかに、計算式を入れていきます。

ElevatedButton(
  onPressed: () => counter.update((state) => state * 2),
  child: Text("タップ"),
)

では、動作確認してみましょう。

image5

タップボタンをタップすると、

image6

1 から 2 へ変更されました。

何度かタップしてみると、

image7

タップする度、2 倍になりました。

ブログ一覧