Skip to main content

​
Chip

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

​
Properties

PropertyTypeDescription
avatarMap<String, dynamic>?The widget to display prior to the chip’s label.
labelMap<String, dynamic>The primary content of the chip.
labelStyleStacTextStyle?The style to use for the label.
labelPaddingStacEdgeInsets?The padding around the label.
deleteIconMap<String, dynamic>?The widget to display as the chip’s delete icon.
onDeletedMap<String, dynamic>?The callback that is called when the delete icon is tapped.
deleteIconColorString?The color of the delete icon.
deleteButtonTooltipMessageString?The message to display in the tooltip for the delete icon.
sideStacBorderSide?The border to display around the chip.
shapeStacRoundedRectangleBorder?The shape of the chip’s border.
clipBehaviorClipThe clip behavior of the chip. Defaults to Clip.none.
autofocusboolWhether this chip should focus itself if nothing else is already focused. Defaults to false.
colorString?The color of the chip.
backgroundColorString?The background color of the chip.
paddingStacEdgeInsets?The padding around the chip.
visualDensityStacVisualDensity?The visual density of the chip.
materialTapTargetSizeMaterialTapTargetSize?Configures the minimum size of the tap target.
elevationdouble?The elevation of the chip.
shadowColorString?The color of the chip’s shadow.
surfaceTintColorString?The color of the chip’s surface tint.
iconThemeStacIconThemeData?The theme for icons in the chip.
avatarBoxConstraintsStacBoxConstraints?The constraints for the avatar.
deleteIconBoxConstraintsStacBoxConstraints?The constraints for the delete icon.

​
Example JSON

{
  "type": "chip",
  "avatar": {
    "type": "circleAvatar",
    "backgroundColor": "#FF0000",
    "child": {
      "type": "text",
      "data": "A"
    }
  },
  "label": {
    "type": "text",
    "data": "Chip Label"
  },
  "labelStyle": {
    "color": "#000000",
    "fontSize": 14
  },
  "labelPadding": {
    "left": 8,
    "top": 4,
    "right": 8,
    "bottom": 4
  },
  "deleteIcon": {
    "type": "icon",
    "icon": "delete"
  },
  "deleteIconColor": "#FF0000",
  "deleteButtonTooltipMessage": "Delete",
  "side": {
    "color": "#000000",
    "width": 1.0
  },
  "shape": {
    "type": "roundedRectangle",
    "borderRadius": 8.0
  },
  "clipBehavior": "antiAlias",
  "autofocus": false,
  "color": "#FFFFFF",
  "backgroundColor": "#EEEEEE",
  "padding": {
    "left": 8,
    "top": 4,
    "right": 8,
    "bottom": 4
  },
  "visualDensity": {
    "horizontal": 0.0,
    "vertical": 0.0
  },
  "materialTapTargetSize": "padded",
  "elevation": 2.0,
  "shadowColor": "#000000",
  "surfaceTintColor": "#FFFFFF",
  "iconTheme": {
    "color": "#000000",
    "size": 24.0
  },
  "avatarBoxConstraints": {
    "minWidth": 24.0,
    "minHeight": 24.0
  },
  "deleteIconBoxConstraints": {
    "minWidth": 24.0,
    "minHeight": 24.0
  }
}