【Flutter】カウンターアプリをStatelessWidgetで実装する【GetX編】

カウンターアプリとは
使用環境
実装
解説
まとめ

カウンターアプリとは

画面上の＋ボタンを押すとカウントが1増加し、-ボタンを押すとカウントが1減少するシンプルなアプリです。

FlutterのサンプルアプリではStateful Widgetを使用していますが、今回はStatelessWidgetで実装します

GetXというパッケージでの解説となります。

使用環境

VScode バージョン: 1.84.2

Flutter バージョン: 3.76.0

get: ^4.6.6

実装

動作画面と実装コードです。

class CountApp extends StatelessWidget {
  const CountApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
//final count = Rx<int>(0);でも可
    final count = 0.obs;

    return Scaffold(
      appBar: AppBar(
        title: const Text('getXでカウンター'),
      ),
      body: Center(
        child: Column(children: [
          const Text(
            '現在のカウント',
            style: TextStyle(fontSize: 24),
          ),
          Obx(
            () => Text(
              '${count.value}',
              style: const TextStyle(
                fontSize: 32,),),
          ),
          const SizedBox(
            height: 50,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                    minimumSize: const Size(100, 60),
                    shape: const CircleBorder()),
                onPressed: () =>count.value--,
                child: const Text(
                  '-',
                  style: TextStyle(fontSize: 24),
                ),
              ),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                    minimumSize: const Size(100, 60),
                    shape: const CircleBorder()),
                onPressed: () => count.value++,
                child: const Text(
                  '+',
                  style: TextStyle(fontSize: 24),
                ),
              )
            ],
          )
        ]),
      ),
    );
  }
}

実装画面はこちらの記事をご覧ください。

解説

final count = 0.obs;

まずは状態管理したいカウントの値を作ります。

.obx (Observable) とは int Stringなどのオブジェクトの拡張プロパティのこと。

GetXでは.obxを付けることにより、UI側で値の変化を監視することができるようになります。

今回のようなint型ならば、final count = Rx(0);と書くこともできます。

onPressed: () =>count.value--,

onPressed:　ボタンを押した時の動作をここに書きます。

ここではcountの値を操作したいのでcount.valueとします。

「count.value–」つまり、countの値から1を引きます。というコードになります。

          Obx(
            () => Text(
              '${count.value}',
              style: const TextStyle(
                fontSize: 32,),),
          ),

最後にカウントの値をリアルタイムに表示させたいのでObx()クラスを使います。

Obx() を付けることによって.obx(Stream・流れてくるデータ)のValue(データ)を監視し、Widgetを更新することができます。

今回はカウントの値を更新したいので

Obx() の中に Text(‘${count.value}’)

と書きます。