Menu
Use ResponsiveCol in a layrz Flutter widget. Apply when defining a column's width at different breakpoints inside a ResponsiveRow.
Instalar com Codex ou Claude Copie este prompt, cole no Codex, Claude ou outro assistente e deixe que ele revise a página da skill e instale para você.
Baseado na classificação ocupacional SOC
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(),
)