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

​
Properties

PropertyTypeDescription
backgroundColorStacColorThe badge’s fill color (hex string). Defaults to ColorScheme.error from theme.
textColorStacColorThe color of the badge’s label text (hex string). Defaults to ColorScheme.onError from theme.
smallSizedoubleThe diameter of the badge if [label] is null. Defaults to 6.0.
largeSizedoubleThe badge’s height if [label] is non-null. Defaults to 16.0.
textStyleStacTextStyleThe text style for the badge’s label.
paddingStacEdgeInsetsThe padding added to the badge’s label. Defaults to 4 pixels horizontal.
alignmentStacAlignmentGeometryCombined with [offset] to determine the location of the [label]. Defaults to AlignmentDirectional.topEnd.
offsetStacOffsetCombined with [alignment] to determine the location of the [label].
labelStacWidgetThe badge’s content, typically a [StacText] widget. If null, displays as a small filled circle.
countintConvenience property for creating a badge with a numeric label. Automatically creates label showing count or ‘[maxCount]+’ if count exceeds maxCount.
maxCountintMaximum count value before showing ‘[maxCount]+’ format. Only used when [count] is provided. Defaults to 999.
isLabelVisibleboolIf false, the badge’s [label] is not included. Defaults to true.
childStacWidgetThe widget that the badge is stacked on top of. Typically an Icon or IconButton.

​
Example

​
Basic Badge with Label

StacBadge(
  label: StacText(data: '5'),
  child: StacIcon(icon: 'notifications', size: 32),
  backgroundColor: '#F44336',
  textColor: StacColors.white,
)

​
Badge with Count

StacBadge(
  count: 5,
  child: StacIcon(icon: 'shopping_cart', size: 32),
)

​
Badge with Count Exceeding MaxCount

StacBadge(
  count: 1000,
  maxCount: 99,
  child: StacIcon(icon: 'notifications', size: 32),
)

​
Small Badge (No Label)

StacBadge(
  smallSize: 8,
  backgroundColor: '#F44336',
  child: StacIcon(icon: 'circle', size: 32),
)

​
Badge on IconButton

StacBadge(
  count: 3,
  child: StacIconButton(
    icon: StacIcon(icon: 'notifications', size: 24),
    padding: StacEdgeInsets.all(0),
    onPressed: StacNoneAction(),
  ),
)

​
Badge with Custom Styling

StacBadge(
  label: StacText(data: 'NEW'),
  backgroundColor: StacColors.green,
  textColor: StacColors.white,
  largeSize: 20,
  padding: StacEdgeInsets(left: 8, top: 4, right: 8, bottom: 4),
  alignment: StacAlignment(dx: 1.0, dy: -1.0),
  offset: StacOffset(dx: 4, dy: -4),
  child: StacIcon(icon: 'mail', size: 32),
)