Skip to main content

Badge Column

FdcBadgeColumn is a compact read-only visual column for values such as status, state, category, or tier. It keeps normal dataset binding and filtering behavior while rendering the value as a badge.

Badge column sample
Loading FDC sample…
FdcGrid(
  dataSet: customerRows,
  options: const FdcGridOptions(readOnly: true),
  columns: [
    const FdcTextColumn(fieldName: 'customer', width: 200),
    FdcBadgeColumn<String>(
      fieldName: 'status',
      width: 120,
      badgeTextBuilder: (value) => value ?? '',
      badgeTextStyle: const TextStyle(
        color: Color(0xFFF8FAFC),
        fontWeight: FontWeight.w700,
      ),
      badgeColorBuilder: resolveStatusColor,
    ),
    FdcBadgeColumn<String>(
      fieldName: 'tier',
      width: 120,
      badgeTextBuilder: (value) => value ?? '',
      badgeTextStyle: const TextStyle(
        color: Color(0xFFF8FAFC),
        fontWeight: FontWeight.w700,
      ),
      badgeColorBuilder: resolveTierColor,
    ),
  ],
);

Key characteristics​

  • Read-only by design.
  • Supports static badge text/color or per-value builders.
  • Good fit for business status values that should stand out visually while staying compact.

Common configuration​

FdcBadgeColumn<String>(
  fieldName: 'status',
  badgeTextBuilder: (value) => value ?? '',
  badgeColorBuilder: resolveStatusColor,
)