Skip to main content
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

PropertyTypeDescription
iconSizedouble?The size of the icon inside the button.
paddingStacEdgeInsets?The padding inside the button.
alignmentStacAlignment?How the icon should be aligned within the button.
splashRadiusdouble?The radius of the splash effect.
colorString?The color to paint the icon.
focusColorString?The color to paint the button when it has the input focus.
hoverColorString?The color to paint the button when a pointer is hovering over it.
highlightColorString?The color to paint the button when it is pressed.
splashColorString?The color to paint the splash effect when the button is pressed.
disabledColorString?The color to paint the icon when the button is disabled.
onPressedMap<String, dynamic>?The callback that is called when the button is tapped.
autofocusboolWhether the button should be focused when the page is loaded. Defaults to false.
tooltipString?The text to display when the user long-presses the button.
enableFeedbackbool?Whether to provide acoustic and/or haptic feedback.
constraintsStacBoxConstraints?The constraints for the button.
styleStacButtonStyle?The style to apply to the button.
isSelectedbool?Whether the button is selected.
selectedIconMap<String, dynamic>?The icon to display when the button is selected.
iconMap<String, dynamic>?The icon to display inside the button.

​
Example JSON

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