Badge - Count

A badge component that displays a label with optional styling variants, icons, and customizable appearance.

The Badges widget provides a flexible way to show labels with different styles and types. It supports various background colors, text styles, and can include icons.

• Types: Success, Warning, Error, Info, Basic
• Content Types: Text label with optional icon
• Customizable: Supports custom styling, padding, and positioning

---

Variants

Large Notification Badge

Badge with a large notification size.

Preview

Code

const Badges.count(
  label: '3',
  notificationBadgeSize: NotificationBadgeSize.large,
  child: CircleAvatar(
    radius: 32,
    child: Icon(Icons.person, size: 36),
  ),
)

---

Medium Notification Badge

Badge with a medium notification size.

Preview

Code

const Badges.count(
  label: '3',
  child: CircleAvatar(
    radius: 20,
    child: Icon(Icons.person, size: 24),
  ),
)

---

Small Notification badge

Badge with a small notification size.

Preview

Code

const Badges.count(
  label: '3',
  notificationBadgeSize: NotificationBadgeSize.small,
  child: CircleAvatar(
    radius: 16,
    child: Icon(Icons.person, size: 20),
  ),
)

---

Properties

Property	Type	Description
label	String	Required. The text to display in the badge.
padding	EdgeInsetsGeometry?	Custom padding for the badge content. Default: horizontal: 8, vertical: 5
offset	Offset?	Position offset for the badge when used with a child widget.
backgroundColor	Color?	Custom background color. If not provided, uses the type’s default color.
textColor	Color?	Custom text color. If not provided, uses the type’s default color.
textStyle	TextStyle?	Custom text style.
alignment	AlignmentGeometry?	Alignment of the badge when used with a child widget.
child	Widget?	Optional child widget that the badge will be attached to.
icon	Widget?	Optional icon to display before the label text.
type	BadgeType	Type of badge (basic, success, warning, error, info). Default: basic
notificationBadgeSize	NotificationBadgeSize	Type of NotificationBadgeSize (small, medium, large). Default: medium