Chip

Documentation for 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

Property	Type	Description
avatar	StacWidget	The widget to display prior to the chip’s label.
label	StacWidget	The primary content of the chip.
labelStyle	StacTextStyle	The style to use for the label.
labelPadding	StacEdgeInsets	The padding around the label.
deleteIcon	StacWidget	The widget to display as the chip’s delete icon.
onDeleted	StacAction	The callback that is called when the delete icon is tapped.
deleteIconColor	StacColor	The color of the delete icon.
deleteButtonTooltipMessage	String	The message to display in the tooltip for the delete icon.
side	StacBorderSide	The border to display around the chip.
shape	StacRoundedRectangleBorder	The shape of the chip’s border.
clipBehavior	StacClip	The clip behavior of the chip. Defaults to Clip.none.
autofocus	bool	Whether this chip should focus itself if nothing else is already focused. Defaults to false.
color	StacColor	The color of the chip.
backgroundColor	StacColor	The background color of the chip.
padding	StacEdgeInsets	The padding around the chip.
visualDensity	StacVisualDensity	The visual density of the chip.
materialTapTargetSize	StacMaterialTapTargetSize	Configures the minimum size of the tap target.
elevation	double	The elevation of the chip.
shadowColor	StacColor	The color of the chip’s shadow.
surfaceTintColor	StacColor	The color of the chip’s surface tint.
iconTheme	StacIconThemeData	The theme for icons in the chip.
avatarBoxConstraints	StacBoxConstraints	The constraints for the avatar.
deleteIconBoxConstraints	StacBoxConstraints	The constraints for the delete icon.

Example

Dart

StacChip(
  avatar: StacCircleAvatar(
    backgroundColor: StacColors.red,
    child: StacText(data: 'A'),
  ),
  label: StacText(data: 'Chip Label'),
  labelStyle: StacTextStyle(color: StacColors.black, fontSize: 14),
  labelPadding: StacEdgeInsets(left: 8, top: 4, right: 8, bottom: 4),
  deleteIcon: StacIcon(icon: 'delete'),
  deleteIconColor: StacColors.red,
  deleteButtonTooltipMessage: 'Delete',
  side: StacBorderSide(color: StacColors.black, width: 1.0),
  shape: StacRoundedRectangleBorder(borderRadius: 8.0),
  clipBehavior: StacClip.antiAlias,
  autofocus: false,
  color: StacColors.white,
  backgroundColor: '#EEEEEE',
  padding: StacEdgeInsets(left: 8, top: 4, right: 8, bottom: 4),
  visualDensity: StacVisualDensity(horizontal: 0.0, vertical: 0.0),
  materialTapTargetSize: StacMaterialTapTargetSize.padded,
  elevation: 2.0,
  shadowColor: StacColors.black,
  surfaceTintColor: StacColors.white,
  iconTheme: StacIconThemeData(color: StacColors.black, size: 24.0),
  avatarBoxConstraints: StacBoxConstraints(minWidth: 24.0, minHeight: 24.0),
  deleteIconBoxConstraints: StacBoxConstraints(minWidth: 24.0, minHeight: 24.0),
)

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
  },
  "shape": {
    "type": "roundedRectangle",
    "borderRadius": 8
  },
  "clipBehavior": "antiAlias",
  "autofocus": false,
  "color": "#FFFFFF",
  "backgroundColor": "#EEEEEE",
  "padding": {
    "left": 8,
    "top": 4,
    "right": 8,
    "bottom": 4
  },
  "visualDensity": {
    "horizontal": 0,
    "vertical": 0
  },
  "materialTapTargetSize": "padded",
  "elevation": 2,
  "shadowColor": "#000000",
  "surfaceTintColor": "#FFFFFF",
  "iconTheme": {
    "color": "#000000",
    "size": 24
  },
  "avatarBoxConstraints": {
    "minWidth": 24,
    "minHeight": 24
  },
  "deleteIconBoxConstraints": {
    "minWidth": 24,
    "minHeight": 24
  }
}

Preview