Skip to main content
The Stac Floating Action Button allows you to build a Flutter floating action button widget using JSON. To know more about the floating action button widget in Flutter, refer to the official documentation.

​
Properties

PropertyTypeDescription
onPressedMap<String, dynamic>?The callback that is called when the button is tapped.
textStyleStacTextStyle?The text style to apply to the button’s label.
buttonTypeFloatingActionButtonTypeThe type of the floating action button. Defaults to FloatingActionButtonType.small.
autofocusboolWhether the button should be focused when the page is loaded. Defaults to false.
iconMap<String, dynamic>?The icon to display inside the button.
backgroundColorString?The color to paint the button.
foregroundColorString?The color to paint the button’s 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.
splashColorString?The color to paint the splash effect when the button is pressed.
extendedTextStyleStacTextStyle?The text style to apply to the extended button’s label.
elevationdouble?The elevation of the button.
focusElevationdouble?The elevation of the button when it has the input focus.
hoverElevationdouble?The elevation of the button when a pointer is hovering over it.
disabledElevationdouble?The elevation of the button when it is disabled.
highlightElevationdouble?The elevation of the button when it is pressed.
extendedIconLabelSpacingdouble?The spacing between the icon and label in the extended button.
enableFeedbackbool?Whether to provide acoustic and/or haptic feedback.
tooltipString?The text to display when the user long-presses the button.
heroTagObject?The tag to use for the hero animation.
childMap<String, dynamic>The widget to display inside the button.

​
Example JSON

{
  "type": "floatingActionButton",
  "onPressed": {},
  "textStyle": {
    "fontSize": 16,
    "color": "#FFFFFF"
  },
  "buttonType": "small",
  "autofocus": false,
  "icon": {
    "type": "icon",
    "icon": "add"
  },
  "backgroundColor": "#FFC107",
  "foregroundColor": "#000000",
  "focusColor": "#FF5722",
  "hoverColor": "#FF9800",
  "splashColor": "#FFEB3B",
  "extendedTextStyle": {
    "fontSize": 14,
    "color": "#FFFFFF"
  },
  "elevation": 6.0,
  "focusElevation": 8.0,
  "hoverElevation": 10.0,
  "disabledElevation": 2.0,
  "highlightElevation": 12.0,
  "extendedIconLabelSpacing": 8.0,
  "enableFeedback": true,
  "tooltip": "Add Item",
  "heroTag": "fab1",
  "child": {
    "type": "text",
    "data": "Add"
  }
}