components/badges/flutstrap_badge library Badges Components

Flutstrap Badge

A small label and counting component with Bootstrap-inspired styling.

Usage Examples

// Basic badge
FlutstrapBadge(
  text: 'New',
  variant: FSBadgeVariant.primary,
)

// Count badge with max limit
FlutstrapBadge.count(
  count: 150,
  maxCount: 99,
  variant: FSBadgeVariant.danger,
)

// Dot indicator
FlutstrapBadge.dot(
  variant: FSBadgeVariant.success,
)

// Badge positioned on another widget
FlutstrapBadgePositioned(
  child: Icon(Icons.notifications),
  badge: FlutstrapBadge.count(count: 5),
  alignment: Alignment.topRight,
)

Accessibility

• Uses Semantics widget for screen readers
• Provides proper semantic labels for different badge types
• Follows WCAG contrast guidelines for text and background colors

Usage Examples

// Basic badge
FlutstrapBadge(
  text: 'New',
  variant: FSBadgeVariant.primary,
)

// Count badge with max limit
FlutstrapBadge.count(
  count: 150,
  maxCount: 99,
  variant: FSBadgeVariant.danger,
)

// Dot indicator
FlutstrapBadge.dot(
  variant: FSBadgeVariant.success,
)

// Badge positioned on another widget
FlutstrapBadgePositioned(
  child: Icon(Icons.notifications),
  badge: FlutstrapBadge.count(count: 5),
  alignment: Alignment.topRight,
)

Accessibility

• Uses Semantics widget for screen readers
• Provides proper semantic labels for different badge types
• Follows WCAG contrast guidelines for text and background colors

Classes

FlutstrapBadge

Flutstrap Badge

FlutstrapBadgePositioned

Badge that can be positioned relative to another widget

Enums

FSBadgeSize

Flutstrap Badge Sizes

FSBadgeVariant

Flutstrap Badge Variants