guarded_button 0.1.2

Сircular progress indicator while processing and repeated click prevention for material buttons for better UX.

Guarded Button

A Flutter package that adds Material buttons with guards that restrict user interaction.

A button with Guard displays CircularProgressIndicator until the moment async callback ends or minimum time passes. The minimum time can be set in Guard constructor.

At the moment package works with Elevated, Outlined and Text buttons.

---

You can add separate Guards to make each button work independently:

[
  GuardedElevatedButton(
    guard: Guard(),
    onPressed: () => {},
    onLongPress: () => {},
    child: const Text('Elevated'),
  ),
  GuardedOutlinedButton(
    guard: Guard(),
    onPressed: () => {},
    onLongPress: () => {},
    child: const Text('Outlined'),
  ),
  GuardedTextButton(
    guard: Guard(),
    onPressed: () => {},
    onLongPress: () => {},
    child: const Text('Text'),
  ),
]

You can use one Guard for several buttons to restrict interaction with all of them whenever one is pressed:

[
  GuardedElevatedButton(
    guard: guard,
    onPressed: () => {},
    onLongPress: () => {},
    child: const Text('Elevated'),
  ),
  GuardedOutlinedButton(
    guard: guard,
    onPressed: () => {},
    onLongPress: () => {},
    child: const Text('Outlined'),
  ),
  GuardedTextButton(
    guard: guard,
    onPressed: () => {},
    onLongPress: () => {},
    child: const Text('Text'),
  ),
]

Styling buttons is supported:

[
  GuardedElevatedButton(
    guard: Guard(),
    style: ElevatedButton.styleFrom(
      backgroundColor: Colors.orange,
      foregroundColor: Colors.black,
    ),
    onPressed: () => {},
    onLongPress: () => {},
    child: const Text('Elevated'),
  ),
  GuardedOutlinedButton(
    guard: Guard(),
    style: OutlinedButton.styleFrom(
      backgroundColor: Colors.orange,
      foregroundColor: Colors.black,
    ),
    onPressed: () => {},
    onLongPress: () => {},
    child: const Text('Outlined'),
  ),
  GuardedTextButton(
    guard: Guard(),
    style: TextButton.styleFrom(
      foregroundColor: Colors.orange,
    ),
    onPressed: () => {},
    onLongPress: () => {},
    child: const Text('Text'),
  ),
]