Skip to main content

CwButton Documentation

Overview​

The CwButton widget is a customizable button component that provides various button styles for different use cases in a Flutter application. It encapsulates common button designs such as primary buttons, inline buttons, icon buttons, and fully rounded buttons, making UI development more modular and reusable.

Parameters Explanation​

Below are the parameters that can be passed to different variations of CwButton:

  • onButtonTap (required): The callback function executed when the button is tapped.
  • prefixIcon: An optional widget that appears before the label (e.g., an icon or image).
  • suffixIcon: An optional widget that appears after the label.
  • label: A Text widget that contains the button text.
  • elevation: Defines the button’s elevation, providing a shadow effect.
  • backgroundColor: Sets the background color of the button.
  • hoverColor: Defines the color when the button is hovered over.
  • shadowColor: Specifies the color of the button’s shadow.
  • padding: Controls the internal padding of the button.
  • borderRadius: Defines the border radius to control the button's shape.
  • buttonHeight: Sets the height of the button.
  • buttonWidth: Sets the width of the button.
  • splashColor: Specifies the color when the button is tapped.
  • buttonBorder: Allows custom border styles for the button.
  • buttonShadow: Defines a list of BoxShadow effects for the button.
  • gradient: Adds a gradient background to the button.
  • splashFactor: Defines the ink splash effect on tap.
  • buttonColor: Alternative property to define the button’s primary color.

Variations and Usage Examples​

1. Primary Button (CwButton.primary)​

A standard button with customizable properties such as elevation, background color, size, and more.

Usage Example:

CwButton.primary(
  onButtonTap: () => print("Primary Button Clicked"),
  label: Text("Primary Button"),
  backgroundColor: Colors.blue,
  borderRadius: BorderRadius.circular(10),
);

2. Inline Button (CwButton.inLine)​

A button without a background, used mainly for textual actions like links.

Usage Example:

CwButton.inLine(
  onButtonTap: () => print("Inline Button Clicked"),
  label: Text("Inline Button"),
);

3. Circular Icon Button (CwButton.circularIcon)​

A circular button with an icon, commonly used for floating action buttons.

Usage Example:

CwButton.circularIcon(
  onButtonTap: () => print("Circular Icon Button Clicked"),
  icon: Icon(Icons.add, color: Colors.white),
  backgroundColor: Colors.green,
);

4. Rounded Rectangular Icon Button (CwButton.roundedRectIcon)​

A rounded rectangular button with an icon.

Usage Example:

CwButton.roundedRectIcon(
  onButtonTap: () => print("Rounded Rect Button Clicked"),
  icon: Icon(Icons.check, color: Colors.white),
  backgroundColor: Colors.blue,
);

5. Fully Rounded Primary Button (CwButton.primaryFullyRounded)​

A fully rounded button with a label and optional icons.

Usage Example:

CwButton.primaryFullyRounded(
  onButtonTap: () => print("Primary Fully Rounded Button Clicked"),
  label: Text("Fully Rounded"),
);

6. Fully Rounded Secondary Button (CwButton.secondaryFullyRounded)​

A fully rounded button with an outlined style.

Usage Example:

CwButton.secondaryFullyRounded(
  onButtonTap: () => print("Secondary Fully Rounded Button Clicked"),
);

7. Fully Rounded Tertiary Button (CwButton.tertiaryFullyRounded)​

A minimalistic rounded button without borders.

Usage Example:

CwButton.tertiaryFullyRounded(
  onButtonTap: () => print("Tertiary Fully Rounded Button Clicked"),
);

8. Inline Widget Button (CwButton.inLineWidget)​

A variation of the inline button with additional customization options.

Usage Example:

CwButton.inLineWidget(
  onButtonTap: () => print("Inline Widget Button Clicked"),
  label: Text("Inline Widget Button"),
);

Source Code Repository​

Find the full source code on GitHub: GitHub Repository