OudsListItem class

OUDS List Item Design Guidelines

Reference design version : 1.0.0

List item is a UI element that displays a row of information within a list. It mirrors Flutter's ListTile spirit — leading / label / trailing — but uses OUDS design tokens, interaction states and an optional navigation indicator.

A list item can be static (read-only) or interactive (navigation). The item adapts its visual appearance according to hover, pressed and disabled states.

Variants

• Static — no onTap, displays read-only information. No interaction states.
• Navigation — provide onTap to make the item interactive. The entire item acts as a single link target and supports the following interaction states:
  • Enabled — default state; the item is available for navigation.
  • Hover — visual feedback when a pointer is over the item. Does not move content, change dimensions, or reveal hidden information.
  • Focus — keyboard focus indicator drawn around the complete navigation target (background + border ring via actionSupportFocus / actionFocus).
  • Pressed — temporary state while the item is being activated, applied to the entire navigation target.

Parameters

• label: The mandatory main text displayed in the center column.
• size: Size variant (OudsListItemSize.defaultSize or OudsListItemSize.smallSize).
• contentAlignment: Vertical alignment of all slots within the row (OudsListItemContentAlignment).
• overline: Optional text displayed above label in a smaller, muted style.
• extraLabel: Optional strong label displayed between label and description.
• description: Optional secondary text displayed below label / extraLabel.
• leading: Optional content at the start of the row (icon, image, avatar, flag …).
• trailing: Optional content at the end of the row (icon, image, text, badge, tag …).
• divider: Whether a horizontal divider is drawn below the item. Defaults to true.
• background: Whether the item has a persistent background color. Defaults to false. Set to true when the item should keep a filled surface even when idle.
• decoration: Optional explicit decoration override. When provided, it takes precedence over the legacy background / divider mapping.
• helperText: Optional helper text displayed below the row (and below the divider).
• boldLabel: Whether label is rendered in bold. Defaults to false.
• enable: Whether the item is interactive. When false, all content is rendered in its disabled appearance and onTap is ignored. Defaults to true.
• onTap: Callback invoked when the item is tapped. When non-null the item becomes a navigation item — it gains an indicator and forwards taps.
• indicator: Navigation indicator shown when onTap is provided. Defaults to OudsListItemDefaults.indicator (chevron pointing right).
• card: Whether the item should use the card decoration and rounded shape. Defaults to false.

Usage Example

// Static list item with a leading icon
OudsListItem(
  label: 'Title',
  description: 'Secondary text',
  leading: OudsListItemLeadingIcon(Neutral(icon: 'assets/icons/star.svg')),
  background: true,
);

// Navigation list item (chevron displayed automatically)
OudsListItem(
  label: 'Navigate',
  onTap: () => Navigator.of(context).push(…),
);

// List item with overline, extra label and trailing text
OudsListItem(
  label: 'Main label',
  overline: 'Category',
  extraLabel: 'Strong info',
  description: 'Additional detail',
  trailing: OudsListItemTrailingText(
    OudsListItemTrailingLabel('99€'),
  ),
);

// Disabled list item
OudsListItem(
  label: 'Unavailable',
  enable: false,
);