Get rid of annoying bugs and learn how to prevent a double click on buttons in Flutter apps with this easy approach.
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.
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.
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;
});
await widget.onPressed();
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.
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.
Related articles
