tap_debouncer

Description:

tap debouncer

Description #
Tap debounce simplifying widget. Wrap your button widget in TapDebounce widget and any taps will be
disabled while tap callback is in progress.
Manual #
Initial code #
Assume your code with some button look like this:
//...
child: RaisedButton(
color: Colors.blue,
disabledColor: Colors.grey,
onPressed: () async => await someLongOperation(), // your tap handler
child: const Text('Short'),
);
//...
copied to clipboard
and you do not want user to be able to press the button again several times and start other
someLongOperation functions. Example is a Navigator pop function - it can take a few hundred of
millis to navigate and user can press the button several times, and that will lead to undesired pop
several screens back instead of one.
Wrap code to TapDebouncer #
Wrap this code to Debouncer and move RaisedButton onPressed contents to Debouncer onTap:
//...
child: TapDebouncer(
onTap: () async => await someLongOperation(), // your tap handler moved here
builder: (BuildContext context, TapDebouncerFunc? onTap) {
return RaisedButton(
color: Colors.blue,
disabledColor: Colors.grey,
onPressed: onTap, // It is just onTap from builder callback
child: const Text('Short'),
);
},
),
//...
copied to clipboard
Debouncer will disable the RaisedButton by setting onPressed to null while onTap is being executed.
Add delay after tap process #
You can add optional delay to be sure that the button is disabled some time after someOperation is
called.
//...
onTap: () async {
await someOperation();

await Future<void>.delayed(const Duration(milliseconds: 1000));
},
//...
copied to clipboard
Use cooldown instead of delay #
You can fill optional cooldown field with some Duration and avoid adding of Future.delayed at
the end of onTap callback, this will be done automatically:
//...
child: TapDebouncer(
cooldown: const Duration(milliseconds: 1000),
onTap: () async => await someLongOperation(), // your tap handler moved here
builder: (BuildContext context, TapDebouncerFunc? onTap) {
return RaisedButton(
color: Colors.blue,
disabledColor: Colors.grey,
onPressed: onTap, // It is just onTap from builder callback
child: const Text('Short'),
);
},
),
//...
copied to clipboard
Then your onTap could be changed to this:
//...
onTap: () async => await someOperation(),
//...
copied to clipboard
Cooldown behavior with exception #
If someOperation will raise exception cooldown delay will also work, after exception.
Change look of busy widget (waiting for tap complete) #
You can inspect value of onTap and change look of your widget:
//...
builder: (BuildContext context, TapDebouncerFunc? onTap) {
return RaisedButton(
color: Colors.blue,
onPressed: onTap,
// variant with manual test onTap for null in builder
child: onTap == null
? const Text('Wait...')
: const Text('Short'),
);
},
//...
copied to clipboard
Also you can use waitBuilder method to build new busy widget:
//...
builder: (BuildContext context, TapDebouncerFunc? onTap) {
//...
},
// variant with using waitBuilder instead of test onTap for null
waitBuilder: (BuildContext context, Widget child) {
return Stack(
children: <Widget>[
child,
const Center(child: CircularProgressIndicator()),
],
);
},
//...
copied to clipboard
waitBuilder will return original widget (built with onTap == null) as child
Example #
See example application for details: