Badges Widget

Flutkit provides the CustomBadge widget, a compact UI component used to display short status labels, tags, counters, or contextual metadata. It is highly customizable and supports multiple visual styles such as soft, outlined, rounded, dismissible, and tag-based layouts.

Badges are commonly used in dashboards to indicate status, categories, notifications, or quick descriptors.

Common Use Cases

The CustomBadge widget is commonly used for:

• Status indicators (e.g., Active, Pending, Draft)
• Category or tag labels
• Notification counters
• Feature flags or labels
• Metadata indicators in tables, cards, or lists
• Filter chips or dismissible tags

Constructor

CustomBadge({
  Key? key,
  required Color kColor,
  required String kText,
  double? kFontSize = kLabelSmall,
  bool isRounded = false,
  bool isSoft = false,
  bool isOutlined = false,
  bool isDismissible = false,
  bool leftBorder = false,
  bool rightBorder = false,
  bool isTagStyle = false,
})

CustomBadge({
  Key? key,
  required Color kColor,
  required String kText,
  double? kFontSize = kLabelSmall,
  bool isRounded = false,
  bool isSoft = false,
  bool isOutlined = false,
  bool isDismissible = false,
  bool leftBorder = false,
  bool rightBorder = false,
  bool isTagStyle = false,
})

Parameters

kColor (required)

required Color kColor,

required Color kColor,

Defines the primary color of the badge.

This color is used for:

• Background color
• Border color
• Text color (depending on style)

kText (required)

required String kText,

required String kText,

Text content displayed inside the badge.

Keep the text short and concise for optimal visual clarity.

kFontSize

double? kFontSize = kLabelSmall,

double? kFontSize = kLabelSmall,

Controls the font size of the badge text.

Defaults to kLabelSmall, making it suitable for compact UI layouts.

isRounded

bool isRounded = false,

bool isRounded = false,

Applies fully rounded corners to the badge.

Commonly used for:

• Status pills
• Count indicators
• Modern UI designs

isSoft

bool isSoft = false,

bool isSoft = false,

Displays the badge with a soft (light) background color.

This style reduces visual weight and is suitable for:

• Secondary information
• Subtle status indicators

isOutlined

bool isOutlined = false,

bool isOutlined = false,

Renders the badge with a transparent background and colored border.

Useful when you want minimal visual emphasis while maintaining context.

isDismissible

bool isDismissible = false,

bool isDismissible = false,

Allows the badge to be dismissed by the user.

Typically used for:

• Removable filters
• Editable tags
• Temporary labels

leftBorder

bool leftBorder = false,

bool leftBorder = false,

Adds a colored border on the left side of the badge.

Often used to:

• Indicate priority
• Add visual hierarchy in lists or tables

rightBorder

bool rightBorder = false,

bool rightBorder = false,

Adds a colored border on the right side of the badge.

Can be used for symmetrical or stylistic purposes.

isTagStyle

bool isTagStyle = false,

bool isTagStyle = false,

Enables a tag-like appearance for the badge.

This style is ideal for:

• Keywords
• Labels
• Taxonomy-based UI elements

Usage Example

Basic usage example

CustomBadge(
  kColor: kPrimaryColor,
  kText: 'Active',
),

CustomBadge(
  kColor: kPrimaryColor,
  kText: 'Active',
),

Soft Rounded Status Badge

CustomBadge(
  kColor: kSuccessColor,
  kText: 'Completed',
  isSoft: true,
  isRounded: true,
),

CustomBadge(
  kColor: kSuccessColor,
  kText: 'Completed',
  isSoft: true,
  isRounded: true,
),

Outlined Badge

CustomBadge(
  kColor: kInfoColor,
  kText: 'Info',
  isOutlined: true,
),

CustomBadge(
  kColor: kInfoColor,
  kText: 'Info',
  isOutlined: true,
),

Dismissible Tag Badge

CustomBadge(
  kColor: kSecondaryColor,
  kText: 'Flutter',
  isTagStyle: true,
  isDismissible: true,
),

CustomBadge(
  kColor: kSecondaryColor,
  kText: 'Flutter',
  isTagStyle: true,
  isDismissible: true,
),

Badge with Left Border

CustomBadge(
  kColor: kWarningColor,
  kText: 'Pending',
  leftBorder: true,
),

CustomBadge(
  kColor: kWarningColor,
  kText: 'Pending',
  leftBorder: true,
),

To explore more usage examples, visit the Badges section in the FlutKit demo under

Base UI → Badges.

Base UI → Badges.

Best Practices

• Keep badge text short (1–2 words)
• Use consistent colors to represent consistent meanings
• Prefer soft or outlined styles for secondary information
• Use rounded badges for status indicators
• Avoid enabling conflicting styles simultaneously (e.g., isSoft and isOutlined)
• Use dismissible badges sparingly to avoid UI clutter

Summary

The CustomBadge widget is a versatile and lightweight component for displaying contextual labels and statuses within FlutKit dashboards. With extensive styling options and flexible layout behavior, it adapts well to various UI scenarios while maintaining clarity and consistency.

Use CustomBadge to enhance information density without sacrificing readability or user experience.