IconButton

Documentation for IconButton

The Stac Icon Button allows you to build a Flutter icon button widget using JSON. To know more about the icon button widget in Flutter, refer to the official documentation.

Properties

Property	Type	Description
iconSize	double	The size of the icon inside the button.
padding	StacEdgeInsets	The padding inside the button.
alignment	StacAlignment	How the icon should be aligned within the button.
splashRadius	double	The radius of the splash effect.
color	StacColor	The color to paint the icon.
focusColor	StacColor	The color to paint the button when it has the input focus.
hoverColor	StacColor	The color to paint the button when a pointer is hovering over it.
highlightColor	StacColor	The color to paint the button when it is pressed.
splashColor	StacColor	The color to paint the splash effect when the button is pressed.
disabledColor	StacColor	The color to paint the icon when the button is disabled.
onPressed	StacAction	The callback that is called when the button is tapped.
autofocus	bool	Whether the button should be focused when the page is loaded. Defaults to false.
tooltip	String	The text to display when the user long-presses the button.
enableFeedback	bool	Whether to provide acoustic and/or haptic feedback.
constraints	StacBoxConstraints	The constraints for the button.
style	StacButtonStyle	The style to apply to the button.
isSelected	bool	Whether the button is selected.
selectedIcon	StacWidget	The icon to display when the button is selected.
icon	StacWidget	The icon to display inside the button.

Example

Dart

StacIconButton(
  iconSize: 24.0,
  padding: StacEdgeInsets(left: 8.0, top: 8.0, right: 8.0, bottom: 8.0),
  alignment: StacAlignment.center,
  splashRadius: 20.0,
  color: StacColors.black,
  focusColor: StacColors.amber,
  hoverColor: '#FF9800',
  highlightColor: '#FF5722',
  splashColor: '#FFEB3B',
  disabledColor: '#BDBDBD',
  onPressed: StacNoneAction(),
  autofocus: false,
  tooltip: 'Add Item',
  enableFeedback: true,
  constraints: StacBoxConstraints(minWidth: 48.0, minHeight: 48.0),
  style: StacButtonStyle(
    backgroundColor: StacColors.amber,
    foregroundColor: StacColors.black,
    shape: StacRoundedRectangleBorder(borderRadius: 8),
  ),
  isSelected: false,
  selectedIcon: StacIcon(icon: 'check'),
  icon: StacIcon(icon: 'add'),
)

JSON

{
  "type": "iconButton",
  "iconSize": 24,
  "padding": {
    "left": 8,
    "top": 8,
    "right": 8,
    "bottom": 8
  },
  "alignment": "center",
  "splashRadius": 20,
  "color": "#000000",
  "focusColor": "#FFC107",
  "hoverColor": "#FF9800",
  "highlightColor": "#FF5722",
  "splashColor": "#FFEB3B",
  "disabledColor": "#BDBDBD",
  "onPressed": {},
  "autofocus": false,
  "tooltip": "Add Item",
  "enableFeedback": true,
  "constraints": {
    "minWidth": 48,
    "minHeight": 48
  },
  "style": {
    "backgroundColor": "#FFC107",
    "foregroundColor": "#000000",
    "shape": {
      "type": "roundedRectangleBorder",
      "borderRadius": 8
    }
  },
  "isSelected": false,
  "selectedIcon": {
    "type": "icon",
    "icon": "check"
  },
  "icon": {
    "type": "icon",
    "icon": "add"
  }
}

Preview