Custom Action Button

The Custom Action Button is a versatile and customizable button widget designed for various actions within your Flutter application. This widget allows for easy customization of its appearance and behavior, making it suitable for a wide range of use cases.

---

Classes Included

1. CustomActionButton

The CustomActionButton is the main widget that provides a customizable button with various styling options.

Constructor

CustomActionButton({
  Key? key,
  required Widget child,
  void Function()? onPressed,
  Color? backgroundColor,
  Color? iconColor,
  double? elevation,
  EdgeInsetsGeometry? padding,
})

Properties

Property	Type	Description
child	Widget	The content of the button, typically a text, icon, or any other widget.
onPressed	void Function()?	The callback function that is triggered when the button is pressed.
backgroundColor	Color?	The background color of the button.
iconColor	Color?	The color of the icon inside the button, if applicable.
elevation	double?	The elevation of the button, affecting its shadow.
padding	EdgeInsetsGeometry?	The padding inside the button.

Usage Example

CustomActionButton(
  backgroundColor: Colors.blue,
  iconColor: Colors.white,
  onPressed: () {
    print('Button pressed!');
  },
  child: Icon(Icons.add),
);

2. CustomActionButtonWrapper

The CustomActionButtonWrapper is a wrapper class designed to provide additional layout and styling options for the CustomActionButton. It allows you to wrap the button with additional widgets and customize the overall look and feel.

Constructor

CustomActionButtonWrapper({
  Key? key,
  required CustomActionButton button,
  Color? borderColor,
  Color? shadowColor,
  double? borderRadius,
  double? elevation,
  EdgeInsetsGeometry? padding,
})

Properties

Property	Type	Description
button	CustomActionButton	The main button widget that is wrapped by this class.
borderColor	Color?	The color of the border around the button.
shadowColor	Color?	The color of the shadow beneath the button.
borderRadius	double?	The border radius of the button, affecting the roundness of its corners.
elevation	double?	The elevation of the wrapper, affecting its shadow.
padding	EdgeInsetsGeometry?	The padding around the button inside the wrapper.

Usage Example

CustomActionButtonWrapper(
  button: CustomActionButton(
    backgroundColor: Colors.green,
    iconColor: Colors.white,
    onPressed: () {
      print('Wrapped Button pressed!');
    },
    child: Icon(Icons.check),
  ),
  borderColor: Colors.green,
  shadowColor: Colors.black45,
  borderRadius: 12.0,
  elevation: 5.0,
  padding: EdgeInsets.all(8.0),
);

3. CustomIconActionButton

The CustomIconActionButton extends the functionality of the CustomActionButton by allowing you to easily create icon buttons with additional customization options for the icon itself.

Constructor

CustomIconActionButton({
  Key? key,
  required IconData icon,
  void Function()? onPressed,
  Color? backgroundColor,
  Color? iconColor,
  double? iconSize,
  double? elevation,
  EdgeInsetsGeometry? padding,
})

Properties

Property	Type	Description
icon	IconData	The icon displayed inside the button.
onPressed	void Function()?	The callback function that is triggered when the button is pressed.
backgroundColor	Color?	The background color of the button.
iconColor	Color?	The color of the icon inside the button.
iconSize	double?	The size of the icon inside the button.
elevation	double?	The elevation of the button, affecting its shadow.
padding	EdgeInsetsGeometry?	The padding inside the button.

Usage Example

CustomIconActionButton(
  icon: Icons.star,
  backgroundColor: Colors.yellow,
  iconColor: Colors.white,
  iconSize: 30.0,
  onPressed: () {
    print('Icon Button pressed!');
  },
);

---

Customization Tips

• Child Widgets: The child property in CustomActionButton can be any widget, giving you flexibility to include text, icons, or custom widgets as button content.
• Wrapper Usage: Use the CustomActionButtonWrapper to add borders, shadows, and additional padding around the button for a more polished look.
• Icon Buttons: The CustomIconActionButton simplifies the creation of icon buttons, especially useful for toolbar actions or compact UI components.

---

Common Use Cases

• Floating Action Buttons (FAB): Replace the standard FAB with a CustomActionButton to achieve a more customized look and behavior.
• Toolbar Buttons: Use CustomIconActionButton for consistent icon buttons in toolbars or navigation bars.
• Action Panels: Implement a series of action buttons using CustomActionButtonWrapper to group and style them consistently.