カウンターアプリとは
画面上の+ボタンを押すとカウントが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}’)
と書きます。
まとめ
いかがだったでしょうか?
ご意見、ご感想ありましたらお気軽にコメントしてください。
実際のアプリ開発の現場ではあまり StatefulWidget は使われないようです。
この機会にStatelessWidgetでの状態管理に挑戦してみてはいかがでしょうか。
【参考文献】
他にも状態管理に使えるライブラリはありますので宜しければこちらもご覧ください。
【Riverpodでカウンターアプリ】
コメント