RichComponent.swatchGrid constructor

  1. @FreezedUnionValue.new('swatch_grid')
const RichComponent.swatchGrid({
  1. required String id,
  2. required List<RichSwatch> swatches,
  3. @Default.new(4) int columns,
})

Grid of color swatches the user can tap to send a message or trigger a callback. Designed for the "pick a vibe / pick a color" inline UX where labeled text buttons feel clinical: real circles with hex fills communicate the look-and-feel at a glance.

Each RichSwatch is a (hex, label, action) triple. A swatch with no action is non-interactive (read-only display); otherwise tapping fires the action through the same RichContentActionHandler pipeline the button group + card use. Keep grids tight — 4 to 8 swatches is the sweet spot; beyond that, use a carousel.

Implementation

@FreezedUnionValue('swatch_grid')
const factory RichComponent.swatchGrid({
  required String id,
  required List<RichSwatch> swatches,
  @Default(4) int columns,
}) = SwatchGridComponent;