Hold to Confirm Button

This repo contains a sample project of a simple UI challenge: a HoldToConfirmButton widget. The button fills up as it's held down, and triggers an action when its completely filled. This provides a clear visual cue to the user about the progress of the button press.

Support

Like this project? Leave a ⭐️, it's free and means a lot.
Consider supporting its upkeep with a coffee. Your generosity is appreciated! ☕

Usage

Default values:

HoldToConfirmButton(
  onProgressCompleted: () {
    // Handle the completed progress here
  },
  child: const Text('Hold to increase',
    style: TextStyle(color: Colors.white),
  ),
)

Custom values:

HoldToConfirmButton(
  onProgressCompleted: () {
    // Handle the completed progress here
  },
  child: const Text('Hold to increase'
    style: TextStyle(color: Colors.white),
  ),
  hapticFeedback: false,
  backgroundColor: Colors.green,
  borderRadius: BorderRadius.all(
    Radius.circular(12),
  ),
)

Here is another approach to this challenge by Diegoveloper

Inspired by Kavsoft

Contributions

Contributions, issues, and feature requests are welcome! Feel free to check issues page.

License

This project is MIT licensed.