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()]),
        )
        .textColor(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()]),
        )
        .textColor(Colors.redAccent)
        .wrapIconTheme(const IconThemeData(color: Colors.white, size: 15));
  }
}

Fortal styles

Remix includes Fortal-themed style helpers for this component:

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(),
        ),
      ],
    );
  }
}

Constructor

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

Properties

Widget Properties

style → Key?

Optional.

styleSpec → Key?

Optional.

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

color(Color value)

Sets background color

borderRadius(BorderRadiusGeometryMix radius)

Sets border radius

padding(EdgeInsetsGeometryMix value)

Sets padding

textColor(Color value)

Sets text color

margin(EdgeInsetsGeometryMix value)

Sets margin

decoration(DecorationMix value)

Sets decoration

alignment(Alignment value)

Sets container alignment

label(TextStyler value)

constraints(BoxConstraintsMix value)

Sets constraints

animate(AnimationConfig animation)

Sets animation

wrap(WidgetModifierConfig value)

foregroundDecoration(DecorationMix value)

transform(Matrix4 value, AlignmentGeometry alignment = Alignment.center)

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