Flutterで数値を増減させるスピンボタンを作る

Flutterで簡単なスピンボタン（数字の増減ができるコントロール）を作成する方法を紹介します。

Flutterにおけるスピンボタンの作成

スピンボタンは、ユーザーが数値を直感的に増減させることができるUIコンポーネントです。Flutterでは、StatefulWidgetを使用して状態管理を行いながら、このタイプのインタラクティブなウィジェットを簡単に実装することができます。

完成イメージ

スピンボタンのサンプルコード

以下がスピンボタンの実装コードです。

class NumberSpin extends StatefulWidget {
  const NumberSpin({super.key});

  @override
  State<NumberSpin> createState() => _NumberSpinState();
}

class _NumberSpinState extends State<NumberSpin> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  void _decrement() {
    setState(() {
      _counter--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        //「ー」ボタン
        SizedBox(
          width: 30,
          height: 30,
          child: FloatingActionButton(
            onPressed: _decrement,
            tooltip: '減らす',
            shape: const CircleBorder(),
            child: const Icon(Icons.remove),
          ),
        ),
        const SizedBox(width: 20),
        // 数値の表示
        Text('$_counter', style: const TextStyle(fontSize: 21.0)),
        const SizedBox(width: 20),
        //「＋」ボタン
        SizedBox(
          width: 30,
          height: 30,
          child: FloatingActionButton(
            onPressed: _increment,
            tooltip: '増やす',
            shape: const CircleBorder(),
            child: const Icon(Icons.add),
          ),
        ),
      ],
    );
  }
}

コード解説

1. 状態管理
   現在の数値は _counter 変数で管理します。
   そして、_incrementと_decrementメソッドで、_counterの値を増減させます。

2. UI構成
   Rowウィジェットを使用して、「＋」ボタン、数値表示、そして「－」ボタンが水平に配置されています。

ロングタップ（長押し）で連続カウントに対応する

スピンボタンをさらに便利にするために、ロングタップ（長押し）機能を実装して連続してカウントできるようにする方法を紹介します。この機能は、ユーザーがボタンを長押しすることで、数値が連続して増減することを可能にします。

タイマーの実装

連続カウントのためには、DartのTimerクラスを活用します。Timer.periodicを使用して一定間隔で特定の関数（この場合は数値の増減）を呼び出します。以下のようにメソッドを定義します：

void _startTimer(void Function() callback) {
  _timer = Timer.periodic(const Duration(milliseconds: 80), (timer) {
    callback();
  });
}

void _stopTimer() {
  _timer?.cancel();
}

イベントハンドラの設定

FloatingActionButtonの周りにGestureDetectorを配置し、onLongPressStartとonLongPressEndイベントを捕捉します。これにより、ユーザーがボタンを長押ししたときにタイマーを開始し、指を離したときにタイマーを停止します。

「ー」ボタンの修正箇所

GestureDetector(
  onLongPressStart: (details) {
    _startTimer(_decrement);
  },
  onLongPressEnd: (details) {
    _stopTimer();
  },
  child: FloatingActionButton(
    onPressed: _decrement,
    tooltip: '減らす',
    shape: const CircleBorder(),
    child: const Icon(Icons.remove),
  ),
)

「＋」ボタンの修正箇所

GestureDetector(
  onLongPressStart: (details) {
    _startTimer(_increment);
  },
  onLongPressEnd: (details) {
    _stopTimer();
  },
  child: FloatingActionButton(
    onPressed: _increment,
    tooltip: '増やす',
    shape: const CircleBorder(),
    child: const Icon(Icons.add),
  ),
),

これにより、ユーザーが「ー」「＋」ボタンをロングタップしている間は連続でカウントされるようになり。大きな値の増減を行う時の操作性が大幅に向上します。

まとめ

Flutterでスピンボタンを作成する方法を解説しました。StatefulWidgetを用いることで状態の変更を効果的にハンドリングし、UIを動的に更新することができます。