guarded_button 0.1.1

Material buttons wrap with a Guard mechanism for better UX.\n - First improvement - a circular progress indicator is shown within the button for the time the callback is processed.\n - Second improvem [...]

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'),
  ),
]