Menu
Use ResponsiveCol in a layrz Flutter widget. Apply when defining a column's width at different breakpoints inside a ResponsiveRow.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Use ThemedTabView and ThemedTab in a layrz Flutter widget. Apply when adding horizontal tab navigation with Material 3 styling.
Use ThemedButton in a layrz Flutter widget. Apply when rendering any tappable action — primary/secondary CTAs, icon-only FABs, destructive actions, cooldown buttons, or the six semantic factories (.save, .cancel, .info, .show, .edit, .delete).
Use ThemedSearchInput in a layrz Flutter widget. Apply when adding a search bar — either a compact icon button that expands into an overlay, or a full-width inline field.
Use when migrating ThemedTable<T> (v1) to ThemedTable2<T> (v2) in a layrz Flutter widget. Apply when a widget uses the old ThemedTable API with onShow/onEdit/onDelete/onMultiDelete/ThemedColumn and needs to be updated.
Use ResponsiveRow in a layrz Flutter widget. Apply when wrapping ResponsiveCol children in a responsive 12-column grid container.
Use ThemedTable2<T> in a layrz Flutter widget. Apply when displaying a list of domain objects in a table with sort, search, multiselect, and row actions.
| name | responsive-col |
| description | Use ResponsiveCol in a layrz Flutter widget. Apply when defining a column's width at different breakpoints inside a ResponsiveRow. |
Dart syntax: This library requires Dart ≥ 3.10. Use dot shorthand for all enum values (e.g.
.col6,.start,.left) — never write the fully-qualified form (Sizes.col6,WrapAlignment.start).
Full constructor, Sizes enum, breakpoints, and examples: read
references/api.mdin this skill's directory.
ResponsiveRowAlways a child of ResponsiveRow. Never used standalone.
ResponsiveCol(
xs: .col12, // full width on mobile
md: .col6, // half width on desktop
child: MyWidget(),
)
xs defaults to .col12 but should always be set explicitly — it's the fallback for all other breakpoints.xl ?? lg ?? md ?? sm ?? xs — only set breakpoints that differ.LayoutBuilder internally — build returns child directly (pass-through). The breakpoint is evaluated by the parent ResponsiveRow via gridSizeAt(rowWidth), using the row's full width (not the col's own constraint).ResponsiveRow as SizedBox(width: available * gridSize / 12) where available = totalWidth - spacing * (n - 1). The col widget itself is unaware of its width.| Param | Constant | Range |
|---|---|---|
xs | kExtraSmallGrid = 600 | < 600 px |
sm | kSmallGrid = 960 | 600–959 px |
md | kMediumGrid = 1264 | 960–1263 px |
lg | kLargeGrid = 1904 | 1264–1903 px |
xl | — | ≥ 1904 px |
// All breakpoints explicit
ResponsiveCol(
xs: .col12,
sm: .col6,
md: .col4,
lg: .col3,
xl: .col2,
child: ProductCard(),
)
// Lazy — only set what changes
ResponsiveCol(
xs: .col12, // mobile: full width
lg: .col6, // desktop: half (sm and md also get col12 via fallback)
child: SectionWidget(),
)