GlassBadge class

A glass morphism badge following iOS 26 liquid glass design.

GlassBadge provides notification count or status dot indicators with:

  • iOS 26 liquid glass backdrop effect
  • Count badge with automatic sizing (1-2 digits small, 3+ wider)
  • Dot badge for status indicators (online, active, etc.)
  • Four position variants (topRight, topLeft, bottomRight, bottomLeft)
  • Auto-hide when count is 0
  • Theme-aware colors
  • Customizable size and colors
  • Overridable semantic label for non-notification domains

Usage

Count Badge (Notification)

GlassBadge(
  count: 5,
  child: GlassIconButton(
    icon: CupertinoIcons.bell,
    onTap: () => showNotifications(),
  ),
)

Dot Badge (Status Indicator)

GlassBadge.dot(
  color: Colors.green, // Online status
  child: CircleAvatar(
    backgroundImage: NetworkImage('https://...'),
  ),
)

Custom Semantic Domain (Downloads, Messages, etc.)

// Visual cap at 99+ but VoiceOver announces the true count:
GlassBadge(
  count: 2500,          // visual shows "99+"
  semanticCount: 2500,  // VoiceOver: "2500 downloads"
  semanticLabel: '2500 downloads',
  child: Icon(CupertinoIcons.cloud_download),
)

True Count for Capped Badges

// count drives the visual; semanticCount overrides the spoken number:
GlassBadge(
  count: messages.length,
  maxCount: 99,
  semanticCount: messages.length, // always speaks the real number
  child: Icon(CupertinoIcons.bubble_left),
)

Custom Position

GlassBadge(
  count: 12,
  position: BadgePosition.topLeft,
  child: Icon(Icons.mail),
)

Auto-hide when Zero

GlassBadge(
  count: unreadCount, // Hides when 0
  child: Icon(Icons.inbox),
)

iOS 26 Design Principles

  • Circular morphology: Perfect circle for dots, pill for counts
  • Liquid glass backdrop: Subtle glass effect on badge
  • Semantic colors: Red for notifications, custom for status
  • Smart positioning: Overlays child without obscuring content
  • Adaptive sizing: Badge grows with digit count
  • Visibility: Only shows when count > 0 or explicitly shown
Inheritance

Constructors

GlassBadge({required Widget child, Key? key, int count = 0, BadgePosition position = BadgePosition.topRight, Color? backgroundColor, Color? textColor, LiquidGlassSettings? settings, GlassQuality? quality, bool showZero = false, int maxCount = 99, String? semanticLabel, int? semanticCount})
Creates a badge with a count number.
const
GlassBadge.dot({required Widget child, Key? key, Color? dotColor = CupertinoColors.systemGreen, BadgePosition position = BadgePosition.topRight, LiquidGlassSettings? settings, GlassQuality? quality, String? semanticLabel})
Creates a dot badge (status indicator).
const

Properties

backgroundColor → Color?
Background color of the badge
final
child → Widget
The widget to display the badge on top of
final
count → int
The count to display in the badge
final
dotColor → Color?
Color of the dot badge
final
hashCode → int
The hash code for this object.
no setterinherited
isDot → bool
Whether this is a dot badge (status indicator)
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
maxCount → int
Maximum count to display
final
position → BadgePosition
Position of the badge relative to the child
final
quality → GlassQuality?
Rendering quality (overrides theme)
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
semanticCount → int?
Overrides the number spoken by screen readers while the visual display remains capped at maxCount.
final
semanticLabel → String?
Fully overrides the VoiceOver / TalkBack announcement for this badge.
final
settings → LiquidGlassSettings?
Custom glass settings (overrides theme)
final
showZero → bool
Whether to show the badge when count is 0
final
textColor → Color?
Text color for the count
final

Methods

build(BuildContext context) → Widget
Describes the part of the user interface represented by this widget.
override
createElement() → StatelessElement
Creates a StatelessElement to manage this widget's location in the tree.
inherited
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited