How To Prevent A Double Click On Buttons In Flutter Apps

Flutter category image

Introduction

Get rid of annoying bugs and learn how to prevent a double click on buttons in Flutter apps with this easy approach. Your users will also thank you for this!

We always assume the best. All people are treated equally, nobody wants war, and users only click once on a button and wait patiently until something happens. Sadly, I can’t fix everything but for the last point, I have a tip for you. Here is how to prevent a double click on buttons in Flutter apps.

Idea

My simple approach disables the button after the click and enables it again once the operation is completed.

You can drive this even further by changing the button caption or displaying a progress indicator. It’s always a good idea to show users that something is happening in your app. If nothing happens they are likely to click a button or go back to the parent page which might cause problems.

So let’s see how to prevent a double click on buttons in Flutter apps by disabling them while work is in progress.

Code

The first step is to create a button widget. It’s just a simple wrapper so that we don’t need to write boilerplate code all over the entire app. In my case, I just wrap an ElevatedButton to get started.

Dart
import 'package:flutter/material.dart';

class ButtonWidget extends StatefulWidget {
  final String caption;
  final Function() onPressed;

  const ButtonWidget({Key? key, required this.caption, required this.onPressed})
      : super(key: key);

  @override
  State<ButtonWidget> createState() => _ButtonWidgetState();
}

As you can see, I pass in the caption and the function that is executed when the button is pressed. You might also have noticed that the button is a StatefulWidget. The reason for this comes now.

Dart
class _ButtonWidgetState extends State<ButtonWidget> {
  bool _isRunning = false;

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
        onPressed: _isRunning ? null : () async => await _onPressed(),
        child: Text(widget.caption));
  }

  Future _onPressed() async {
    setState(() {
      _isRunning = true;
    });

    try {
      await widget.onPressed();
    } finally {
      setState(() {
        _isRunning = false;
      });
    }  
  }
}

Look at the _onPressed method. First, a variable is set to true that indicates that the app is doing something. While this variable is true, the button has null assigned as the onPressed handler. This disables the button and you cannot click it anymore. Then, we wait for the actual operation to complete and set our state variable to false again.

The try finally block ensures that the button won’t be stuck in the pressed state even if an error happens.

Pretty easy solution!

Of course, you can enhance it by changing the button or the colors when the button is disabled to make it even clearer. A progress indicator could also be an option. Here is a great package that offers many different animations that you can use!

Conclusion

In this article, you learned how to prevent a double click on buttons in Flutter apps. By disabling the button after the first click and re-enabling it once the action is completed, we can make sure that the click is only handled once.


Want More Flutter Content?

Join my bi-weekly newsletter that delivers small Flutter portions right in your inbox. A title, an abstract, a link, and you decide if you want to dive in!

Become A Firebase Expert!

Take a deep dive into Firebase and learn how to really handle their services. This ebook makes you an instant Firebase professional!

Flutter โค๏ธ Firebase

Get started with Firebase and learn how to use it in your Flutter apps. My detailed ebook delivers you everything you need to know! Flutter and Firebase are a perfect match!