📱

flutter ボタンにカウンタークリア機能を実装する

2022/09/15に公開

Flutter

Android Studio

Dart

tech

みなさんこんにちは

本日のお題

hooks_riverpodの共通変数stateを更新する。
Android StudioでFlutterアプリを作成すると、ボタンを押すとカウンターの数値が上がるアプリが作成されます。これは、hooks_riverpodを利用していません。
そこで、ここまでの記事のなかで、hooks_riverpodのサンプリアプリをベースに、
・複数のファイルに分けて、
・entity内の変数に＋１、ボタンを追加してきました。
今回は、＋１しかできない今のアプリの数値を０クリアするところまで作りたいです。
これが出来ると、Navigator2.0の画面遷移が少し近づきます。

ソースを修正する

以下にも格納しています。

data.dart

//hooks_riverpodを利用するための宣言
import 'package:hooks_riverpod/hooks_riverpod.dart';

//Providerの宣言
final counterProvider = StateNotifierProvider<Counter, int>((_) => Counter());

//Providerに紐づいたクラスと関数
class Counter extends StateNotifier<int> {
  Counter() : super(0);//stateを０で初期化

  //increment()関数が呼ばれたら、stateの数字を＋1する。
  void increment() => state++;

  //カウンターの値が指定値に変更出来る関数を作る
  //今回追加
  void setIncrement( int intData ){
    state = intData;
  }
}

myhome.dart

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

import '../entity/data.dart';

class MyHomePage extends HookConsumerWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);

    //今回追加
    final ButtonStyle style = ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 20));

    return Scaffold(
      appBar: AppBar(
        title: const Text('Riverpod counter example'),
      ),

      body: Center(
        /*　//元々あったソース
        child: Text(
          '$count',
          style: Theme.of(context).textTheme.headline4,
        ),
         */
        //今回追加
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(
              '$count',
              style: Theme.of(context).textTheme.headline4,
            ),
            const SizedBox(height: 30),
            ElevatedButton(
              style: style,
              //onPressed: () {},//ボタン押した時に動く。今は何も入れていない。
              onPressed: () {//今回追加
	        //data.dartに追加した関数を実行する
                ref.read(counterProvider.notifier).setIncrement(0);
              },
              child: const Text('Enabled'),
            ),
          ],
        ),
      ),

      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(counterProvider.notifier).increment(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

試運転

数値のクリアに成功しました。

今回の課題

課題は特にないですね。data.dartファイルに任意の数値を格納するコードを書き込むだけですからね。
次はいよいよメインのNavigator2.0に行けるといいなぁ

今後の予定

ちょこちょこ書き溜めてたネタが一回尽きたので、またあいだが開くかもしれません。
ちょっと忙しすぎますよ。