Flutter Badge Widget — Free Badge Component with Dot, Count and Label Variants

Badges are one of the most commonly used UI elements in mobile apps — notification counts, status indicators, category labels. The Flutter Badge Widget from FlutterKit gives you three production-ready badge variants with full Dart code, live preview, and DartPad compatibility.

Badge Variants Included

Dot Badge — a small coloured circle indicating status or unseen activity. Used on avatars, icons, and list items to indicate something new without showing a count.

Count Badge — displays a number — typically for unread notifications, cart items, or message counts. Handles single digits, double digits, and 99+ overflow gracefully.

Label Badge — a pill-shaped badge with text. Used for status labels (New, Live, Pro), category tags, and feature flags on UI elements.

All three variants are enum-driven — you pass the type and value, the widget handles the rendering.

How to Use the Badge Widget

1. Visit rohansurve.in/flutterkit/badge
2. Preview all variants live in the browser
3. Copy the Dart code
4. Paste into your Flutter project

The widget is self-contained — no additional packages required beyond the Flutter SDK.

Dart Code Pattern

The badge component follows a clean enum-driven pattern:

Badge(
  type: BadgeType.count,
  value: '12',
  color: BadgeColor.primary,
)

Swapping between dot, count, and label is a single enum change. Color, size, and position are all configurable through named parameters.

Common Use Cases in Flutter Apps

Bottom navigation bar — count badges on tab icons for notifications, messages, or cart items. Pairs well with the Bottom Navigation Bar component also in FlutterKit.

App bar actions — dot badge on the notification bell icon. Count badge on the shopping cart icon.

List items and avatars — online/offline status dot on user avatars in chat apps. Unread count on conversation list items.

Cards and product tiles — "New", "Sale", or "Pro" label badges on product cards and feature items.

Settings and menu items — update available badge, beta feature label, or new content indicator.

Related FlutterKit Components

• Chip Widget — input chips, filter chips, and assist chips
• Bottom Nav Bar — flat, bordered, and floating pill navigation styles
• Star Rating — interactive and display star rating widget
• Alert Widget — info, success, warning, and error alert styles
• Button Widget — primary, secondary, outlined, and text button variants

All free at rohansurve.in/flutterkit.

Free Flutter Components, No Signup

The Badge Widget is part of FlutterKit — a free library of Flutter UI components with live previews and copy-paste Dart code. Built for developers who want production-quality components without starting from scratch.