[Flutter]ボタン(Button)の連打を防止する方法

どうも、ちょげ(@chogetarou)です。

ボタンの連打を防止する方法を紹介します。

方法
まとめ

方法

ボタンの連打を防止するには、三項演算子と「delayed」関数を使います。

まず、ボタンを無効にするための変数を用意します。

bool _isDisabled = false;

次に、連打を無効にしたいボタンの「onPressed」に、三項演算子で有効・無効を切り替える設定をします。

ElevatedButton(
  onPressed: _isDisabled
      ? null
      : () async {},
  child: Text('Button'),
),

この時、指定する関数には、「async」を指定しておきます。

最後に、「setState」でボタン無効にした後、「Future.delayed()」で遅延させ、ボタンを有効にする処理を追加します。

ElevatedButton(
  onPressed: _isDisabled
      ? null
      : () async {
          setState(() => _isDisabled = true); //ボタンを無効

          await Future.delayed(
            Duration(seconds: 3), //無効にする時間
          );

          setState(() => _isDisabled = false); //ボタンを有効
        },
  child: Text('Button'),
),

ボタンが無効に無効にする時間、言い換えると連打を防ぐ時間は、「Future.delayed()」の引数で指定します。