OudsSmallListItem class

OUDS List Item Design Guidelines

Reference design version : 1.0.0

A compact variant of OudsListItem locked to OudsListItemSize.smallSize.

Compared to OudsListItem, this variant:

• Does not support overline or extraLabel — only label and description.
• Restricts leading content to OudsSmallListItemLeadingIcon and OudsSmallListItemLeadingImage.
• Restricts trailing content to OudsSmallListItemTrailingIcon, OudsSmallListItemTrailingImage and OudsSmallListItemTrailingText.
• Renders all icons and images at OudsListItemAssetSize.small.

Variants

• Static — background = false by default, keeping the compact item transparent unless you opt in to a persistent background. 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; transparent background, item 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).
  • 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.
• contentAlignment: Vertical alignment of all slots within the row (OudsListItemContentAlignment).
• description: Optional secondary text displayed below label.
• leading: Optional leading content. Accepts OudsSmallListItemLeadingIcon or OudsSmallListItemLeadingImage.
• trailing: Optional trailing content. Accepts OudsSmallListItemTrailingIcon, OudsSmallListItemTrailingImage or OudsSmallListItemTrailingText.
• 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. This mirrors the constructor default and is delegated to OudsListItem.
• decoration: Optional explicit decoration override delegated to OudsListItem. When non-null, it takes precedence over background and divider.
• 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. Defaults to true.
• onTap: Callback invoked when the item is tapped. When non-null the item becomes a navigation item and displays an indicator.
• indicator: Navigation indicator. Defaults to OudsListItemDefaults.indicator.
• card: Whether the item should use the card decoration and rounded shape. Defaults to false.

Usage Example

// Static compact item with a leading icon
OudsSmallListItem(
  label: 'Compact item',
  description: 'Secondary text',
  leading: OudsSmallListItemLeadingIcon(Positive()),
);

// Navigation compact item
OudsSmallListItem(
  label: 'Navigate',
  onTap: () => Navigator.of(context).push(…),
);

// Compact item with trailing text
OudsSmallListItem(
  label: 'Item with price',
  trailing: OudsSmallListItemTrailingText('99€'),
);