[Flutter] ダブルタップを防ぐには？シンプルなボタン制御の実装方法

Flutter

遠藤亮

2025年03月10日

はじめに

こんにちは、株式会社メンバーズ Cross Applicationカンパニーの遠藤です。
サービスローンチ時にFlutterの経験ゼロで開発に関わる機会があったので、その際に調べた内容をまとめました。

ダブルタップが引き起こす問題とは？

どのモバイルアプリでもユーザーのボタン操作によって誤ってダブルタップする場合があると思います。それによってバグや、良いユーザー体験を損なうということもあります。
今回はそのダブルタップをFlutterで防止する際に調べたことを記載します。

Flutterでダブルタップを防ぐ実装方法

シンプルに下記の書き方がダブルタップ防止に最適でした。

import 'package:flutter/material.dart';

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

  @override
  State<DoubleTapPreventButton> createState() => _DoubleTapPreventButtonState();
}

class _DoubleTapPreventButtonState extends State<DoubleTapPreventButton> {
  bool _isButtonDisabled = false;

  void _onPressed() {
    if (_isButtonDisabled) return; // ボタンが無効な場合、何もしない

    setState(() {
      _isButtonDisabled = true; // ボタンを無効化
    });

    // ここにボタンが押された時の処理を書く
    print('Button pressed!');

    // 処理が終わったらボタンを再有効化 (有効化のタイミングはケースバイケース)
    Future.delayed(const Duration(seconds: 2), () {
      setState(() {
        _isButtonDisabled = false; // ボタンを再度有効化
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _isButtonDisabled ? null : _onPressed, // ボタンが無効な場合はnull
      child: const Text('Press Me'),
    );
  }
}

解説

上記の書き方でflutter_easyloadingのパッケージと組み合わせることも可能ですし、ベースはこのかき方で良いかと思いました。
一方で、GestureDetectorクラスのダブルタップを試しに使用してみましたが、ダブルタップの間隔が適当でないとダブルタップを検知しない挙動があり、注意が必要です。
そのため、ボタンの無効化を行う本手法がより確実だと考えました。