Single Press Button

The SinglePressButton is a customizable Flutter button widget designed to ensure that its onPressed callback is invoked only once per press. This prevents multiple invocations during a single press, making it ideal for actions that shouldn't be executed multiple times concurrently, such as network requests.

---

Class Included

1. SinglePressButton

The SinglePressButton is the primary widget that provides a button with built-in processing state management and optional loading indicators.

Constructor

SinglePressButton({
  Key? key,
  required Widget child,
  required Future<void> Function() onPressed,
  EdgeInsetsGeometry? padding,
  EdgeInsetsGeometry? margin,
  Color? color,
  Color? disabledColor,
  double borderRadius = 8.0,
  TextStyle? textStyle,
  double? elevation,
  OutlinedBorder? shape,
  bool showLoadingIndicator = false,
  Color? loadingIndicatorColor,
  VoidCallback? onStartProcessing,
  VoidCallback? onFinishProcessing,
  void Function(Object error)? onError,
})

Properties

Property	Type	Description
child	Widget	The content of the button, typically a text, icon, or any other widget.
onPressed	Future<void> Function()	The asynchronous callback function that is triggered when the button is pressed. Ensures single invocation.
padding	EdgeInsetsGeometry?	The padding inside the button. If not specified, default padding is applied.
margin	EdgeInsetsGeometry?	The external margin around the button, providing space between it and other widgets.
color	Color?	The background color of the button when enabled. Defaults to the theme's primary color.
disabledColor	Color?	The background color of the button when disabled (during processing). Defaults to the theme's disabled color.
borderRadius	double	The border radius of the button, controlling the roundness of its corners. Defaults to 8.0.
textStyle	TextStyle?	The text style for the button's label. Inherits from the theme if not specified.
elevation	double?	The elevation (shadow depth) of the button. Defaults to the theme's elevated button elevation.
shape	OutlinedBorder?	The shape of the button's material. Allows customization of borders and outlines. Defaults to a rounded rectangle.
showLoadingIndicator	bool	Whether to display a loading indicator while processing. Defaults to false.
loadingIndicatorColor	Color?	The color of the loading indicator. Defaults to the theme's ColorScheme.onPrimary.
onStartProcessing	VoidCallback?	Callback invoked when the button starts processing. Useful for triggering actions like disabling other UI elements.
onFinishProcessing	VoidCallback?	Callback invoked when the button finishes processing. Useful for resetting states or triggering subsequent actions.
onError	void Function(Object error)?	Callback invoked when an error occurs during processing. Provides a way to handle exceptions thrown by the onPressed callback.

Usage Example

SinglePressButton(
  onPressed: () async {
    await performNetworkRequest();
  },
  child: Text('Submit'),
  showLoadingIndicator: true,
  color: Colors.blue,
  disabledColor: Colors.blueAccent,
  borderRadius: 12.0,
  padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
  onStartProcessing: () {
    // Optional: Actions to perform when processing starts.
  },
  onFinishProcessing: () {
    // Optional: Actions to perform when processing finishes.
  },
  onError: (error) {
    // Optional: Handle errors during processing.
  },
)

---

Customization Tips

• Loading Indicator: Enable showLoadingIndicator to provide visual feedback during long-running operations. Customize its color using loadingIndicatorColor to match your app's theme.
• Styling: Use properties like color, disabledColor, borderRadius, and shape to tailor the button's appearance. Consistent styling enhances the user experience.
• Padding and Margin: Adjust padding and margin to control the button's spacing within your layout. Proper spacing ensures a clean and organized UI.
• Callbacks: Utilize onStartProcessing, onFinishProcessing, and onError to manage the application's state and handle errors gracefully during asynchronous operations.

---

Common Use Cases

• Form Submissions: Prevent multiple submissions by ensuring the submit button can only be pressed once until the operation completes.
• Network Requests: Manage API calls without risking duplicate requests due to rapid button presses.
• Action Confirmations: Use in dialogs or sheets where an action needs confirmation, ensuring that the confirmation is processed singularly.
• Interactive Panels: Integrate into expandable panels or other interactive UI components where state management is crucial.

---

Dependencies

• CustomActionButton: The SinglePressButton relies on the CustomActionButton widget for its foundational button behavior and styling. Ensure that CustomActionButton is properly implemented and imported within your project.

---

Related Widgets

• CustomActionButton: A versatile button widget that SinglePressButton builds upon, offering various styles and interaction capabilities.
• DoubleListTileButtons: Useful for arranging action buttons side by side, often used in conjunction with SinglePressButton for confirm and cancel actions.
• ListTileButton: A customizable list tile that can be integrated with SinglePressButton for interactive list items.