Skip to main content

IconOnlyButton Documentation

Overview​

The IconOnlyButton widget is a specialized button that primarily contains an icon and is designed to be circular by default. It extends the CwButton class and provides additional customization options such as background gradient, border styling, shadow effects, and more.

Parameters Explanation​

Below are the parameters that can be passed to customize IconOnlyButton:

  • onButtonTap (required): The callback function executed when the button is tapped.
  • prefixIcon: An optional widget that appears before the icon.
  • suffixIcon: An optional widget that appears inside the button, representing the main icon.
  • backgrounColor: Sets the background color of the button.
  • elevation: Defines the button’s elevation, providing a shadow effect.
  • shadowColor: Specifies the color of the button’s shadow.
  • hoverColor: Defines the color when the button is hovered over.
  • padding: Controls the internal padding of the button.
  • borderRadius: Defines the border radius to control the button's shape when it is not circular.
  • splashColor: Specifies the color when the button is tapped.
  • buttonSize: Sets the size of the button.
  • buttonBorder: Allows custom border styles for the button.
  • backgroundGradient: Adds a gradient background to the button.
  • buttonShadow: Defines a list of BoxShadow effects for the button.
  • splashFactor: Defines the ink splash effect on tap.
  • circularButton: Determines whether the button is circular (default is true).

Usage Example​

1. Default Circular Icon Button​

A circular button containing an icon with a simple tap event.

IconOnlyButton(
  onButtonTap: () => print("Icon Button Clicked"),
  suffixIcon: Icon(Icons.add, color: Colors.white),
  backgrounColor: Colors.blue,
);

2. Square Icon Button with Custom Border​

A non-circular button with a border and shadow effect.

IconOnlyButton(
  onButtonTap: () => print("Square Icon Button Clicked"),
  suffixIcon: Icon(Icons.check, color: Colors.white),
  circularButton: false,
  borderRadius: BorderRadius.circular(10),
  buttonBorder: Border.all(color: Colors.blue, width: 2),
  buttonShadow: [
    BoxShadow(color: Colors.grey, blurRadius: 5, offset: Offset(2, 2))
  ],
);

3. Gradient Background Circular Button​

A button with a gradient background and a custom splash effect.

IconOnlyButton(
  onButtonTap: () => print("Gradient Button Clicked"),
  suffixIcon: Icon(Icons.star, color: Colors.white),
  backgroundGradient: LinearGradient(
    colors: [Colors.purple, Colors.blue],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  splashColor: Colors.white54,
);

Source Code Repository​

Find the full source code on GitHub: GitHub Repository