LayrzChip

LayrzChip

A static, visual-only compact label widget with optional leading icon and delete affordance.

Metadata
Mirrors: ThemedChip (layrz_theme)
Phase: M2 (Core primitives)
Domain: Data
Primitive: Hand-rolled (Container + GestureDetector)
Status: Confirmed scope.

---

Overview

LayrzChip is a compact label with no selection state, no toggle behavior, and no selection modes. It is visual-only — a static representation of a piece of data (tag, label, badge, status indicator). The only interactive element is an optional delete affordance.

Chips are commonly used for:

• Tag lists and categories
• Filter badges
• Status indicators
• Compact labels in lists and chips groups

Key principle: Chips do not implement selection control. Selection (single or multi) belongs to input components like LayrzSelectInput or LayrzMultiSelectInput, not to chip widgets. If you need the user to choose items, use an input component, not chips.

Design Principles

• Static, not interactive: The chip itself is not tappable. Only the optional delete icon responds to taps.
• Visual representation: Chips express semantic meaning (info, success, danger, etc.) via color and style.
• Fixed sizing: Height and spacing are standardized. Chips are compact by design.
• Flexible styling: Three style variants (filled, outlined, filledTonal) with six semantic types (info, success, warning, danger, context, custom).
• Grouped displays: Use LayrzChipGroup to manage multiple chips with optional overflow handling.

---

API Structure

Constructor

const LayrzChip({
  required String labelText,
  IconData? leadingIcon,
  VoidCallback? onDelete,
  LayrzChipStyle style = LayrzChipStyle.filledTonal,
  LayrzChipType type = LayrzChipType.custom,
  Color? color,
  Key? key,
})

• labelText (String, required) — The text label displayed in the chip.
• leadingIcon (IconData?, default null) — Optional icon displayed before the label (from flutter_material_design_icons).
• onDelete (VoidCallback?, default null) — Callback invoked when the delete icon is tapped. When null, no delete icon is rendered.
• style (LayrzChipStyle, default filledTonal) — Visual style of the chip.
• type (LayrzChipType, default custom) — Semantic type determining the accent color. When type == custom, the color parameter is honored.
• color (Color?, default null) — Explicit accent color override. Only used when type == custom. Assertion enforces that color is null when type is not custom.

computeWidth(BuildContext) Method

double computeWidth(BuildContext context)

Returns the intrinsic width of the chip in logical pixels, including padding, icon space, and label width. Used by LayrzChipGroup in compact mode to determine when to show the +N overflow indicator.

---

LayrzChipStyle

Three visual style variants:

enum LayrzChipStyle {
  /// Solid fill with accent color, no border.
  filled,

  /// Outlined only, no fill; accent-colored border.
  outlined,

  /// Subtle tonal fill (semi-transparent) with no border.
  filledTonal,
}

• filled — Solid accent background, no border. Best for emphasized labels.
• outlined — Transparent background with accent border. Best for secondary labels.
• filledTonal — Subtle tonal (semi-transparent) background, no border. Default and recommended for most use cases; best for neutral or neutral-secondary labels.

---

LayrzChipType

Six semantic type values controlling the accent color:

enum LayrzChipType {
  /// Informational color — LayrzTokens.colors.info (blue).
  info,

  /// Success color — LayrzTokens.colors.success (green).
  success,

  /// Warning color — LayrzTokens.colors.warning (orange).
  warning,

  /// Danger color — LayrzTokens.colors.danger (red).
  danger,

  /// Contextual color — LayrzTokens.colors.contextual.
  context,

  /// Custom color — use explicit color parameter.
  custom,
}

When type is one of the semantic types (info, success, warning, danger, context), the corresponding token color is applied. When type == custom, the color parameter is honored (defaulting to primary if both type is custom and color is null).

---

Interaction States

LayrzChip has no selection state, hover highlight, or focus state. The chip is static. Only the optional delete affordance (if onDelete is non-null) is interactive:

• Delete icon: Appears to the right of the label when onDelete is non-null. Responds to hover, press, and focus. Tapping invokes the callback.
• Chip itself: Not tappable. Click and hover do nothing.

---

Examples

Basic Chip

LayrzChip(
  labelText: 'Flutter',
)

Chip with Leading Icon

LayrzChip(
  labelText: 'Success',
  leadingIcon: MdiIcons.checkboxOutline,
  type: LayrzChipType.success,
)

Chip with Delete Action

LayrzChip(
  labelText: 'Remove me',
  onDelete: () => setState(() => labels.remove('Remove me')),
  type: LayrzChipType.warning,
  style: LayrzChipStyle.outlined,
)

Custom Color

LayrzChip(
  labelText: 'Custom Color',
  type: LayrzChipType.custom,
  color: Color(0xFF9C27B0),  // Purple
  style: LayrzChipStyle.filled,
)

---

Notes

• No selection semantics: Chips do not track whether they are "selected" or "active". If you need selection control, use an input component instead.
• Delete affordance is optional: Omit onDelete to create a read-only label. Pass a callback to make the chip dismissible.
• Pill radius: Border radius is always tokens.radius.full, giving chips their characteristic rounded-rectangle shape.
• No size parameters: Chip size and spacing are fixed and not configurable. Constraints from the parent layout apply, but the intrinsic sizing is standardized.

---

See Also

• LayrzChipGroup — Container for multiple chips with overflow handling