Badge

A compact component for displaying counts, status indicators, or labels.

When to use this

Notification counts: Show unread message or notification counts
Status indicators: Display online/offline status or alert levels
Labels: Attach categorical labels to other UI elements
Counters: Show numerical values in a compact format

Basic implementation


import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class BadgeExample extends StatelessWidget {
  const BadgeExample({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      spacing: 16,
      children: [
        RemixBadge(
          label: '8',
          style: styleLabel,
        ),
        RemixBadge(
          style: styleIcon,
          child: const Icon(Icons.camera_alt),
        ),
      ],
    );
  }
 
  RemixBadgeStyle get styleLabel {
    return RemixBadgeStyle()
        .size(24, 24)
        .wrapClipOval()
        .label(
          TextStyler()
              .fontSize(15)
              .wrapAlign(Alignment.center)
              .fontFeatures([const FontFeature.tabularFigures()]),
        )
        .foregroundColor(Colors.greenAccent.shade700)
        .labelColor(Colors.white)
        .labelFontWeight(FontWeight.bold)
        .labelFontSize(15);
  }
 
  RemixBadgeStyle get styleIcon {
    return RemixBadgeStyle()
        .size(24, 24)
        .wrapClipOval()
        .label(
          TextStyler()
              .fontSize(15)
              .wrapAlign(Alignment.center)
              .fontFeatures([const FontFeature.tabularFigures()]),
        )
        .foregroundColor(Colors.redAccent)
        .wrapIconTheme(const IconThemeData(color: Colors.white, size: 15));
  }
}

Interactive preview

Resolving preview metadata...

Fortal styles

Remix includes Fortal-themed style helpers for this component:

Fortal variants


import 'package:flutter/material.dart';
import 'package:remix/remix.dart';
 
class FortalBadgeExample extends StatelessWidget {
  const FortalBadgeExample({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Row(
      spacing: 16,
      children: [
        RemixBadge(
          label: '5',
          style: FortalBadgeStyle.solid(),
        ),
        RemixBadge(
          label: 'New',
          style: FortalBadgeStyle.soft(),
        ),
      ],
    );
  }
}

See the FortalBadgeStyle source code for all available options.

Constructor


const RemixBadge({
  Key? key,
  Widget? child,
  String? label,
  RemixBadgeLabelBuilder? labelBuilder,
  RemixBadgeStyle style = const RemixBadgeStyle.create(),
  RemixBadgeSpec? styleSpec,
})

Properties

Prop	Type	Required / Default Value
`style`	`RemixBadgeStyle`	Optional. The style configuration for the badge. Customize colors, sizing, shape, and state-based styling.
`styleSpec`	`RemixBadgeSpec?`	Optional. A pre-resolved style spec that bypasses style resolution. Useful for performance when sharing resolved styles across multiple instances.
`key`	`Key?`	Optional. Controls how one widget replaces another widget in the tree.
`label`	`String?`	Optional. Optional text label rendered with the badge text style.
`child`	`Widget?`	Optional. Optional fully custom badge content. When provided the badge style is applied only to the container.
`labelBuilder`	`RemixBadgeLabelBuilder?`	Optional. Optional builder that receives the resolved [TextSpec] so callers can render text with custom widgets while preserving badge typography.

Style Methods

Method	Description
`backgroundColor(Color value)`	Sets background color
`foregroundColor(Color value)`	Sets the foreground color (text) of the badge
`borderRadius(BorderRadiusGeometryMix radius)`	Sets border radius
`padding(EdgeInsetsGeometryMix value)`	Sets padding
`margin(EdgeInsetsGeometryMix value)`	Sets margin
`decoration(DecorationMix value)`	Sets decoration
`alignment(Alignment value)`	Sets container alignment
`label(TextStyler value)`	Configures the label text style using a TextStyler.
`constraints(BoxConstraintsMix value)`	Sets constraints
`animate(AnimationConfig animation)`	Sets animation
`wrap(WidgetModifierConfig value)`	Applies widget modifiers such as clipping, opacity, or scaling.
`foregroundDecoration(DecorationMix value)`	Sets a foreground decoration painted on top of the component.
`transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)`	Applies a matrix transformation to the component.
`labelTextStyle(TextStyleMix value)`	Sets label/text style using TextStyleMix directly
`labelColor(Color value)`	Sets label/text color
`labelFontSize(double value)`	Sets label/text font size
`labelFontWeight(FontWeight value)`	Sets label/text font weight
`labelFontStyle(FontStyle value)`	Sets label/text font style (italic/normal)
`labelLetterSpacing(double value)`	Sets label/text letter spacing
`labelDecoration(TextDecoration value)`	Sets label/text decoration (underline, strikethrough, etc.)
`labelFontFamily(String value)`	Sets label/text font family
`labelHeight(double value)`	Sets label/text line height
`labelWordSpacing(double value)`	Sets label/text word spacing
`labelDecorationColor(Color value)`	Sets label/text decoration color