Responsive col

Skill goldenm-software/layrz_theme/.claude/skills/responsive-col

Use ResponsiveCol in a layrz Flutter widget. Apply when defining a column's width at different breakpoints inside a ResponsiveRow.From its SKILL.md

Install

npx -y skills add goldenm-software/layrz_theme --skill responsive-col

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

8 stars8 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

SKILL.md

2.1 KB, as published. Nobody here has run it

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.md in this skill's directory.

When to use

Defining width at different screen sizes for a child inside a ResponsiveRow
Any widget that needs to be full-width on mobile and narrower on larger screens

Always a child of ResponsiveRow. Never used standalone.

Minimal usage

ResponsiveCol(
  xs: .col12,  // full width on mobile
  md: .col6,   // half width on desktop
  child: MyWidget(),
)

Key behaviors

xs defaults to .col12 but should always be set explicitly — it's the fallback for all other breakpoints.
Fallback chain: xl ?? lg ?? md ?? sm ?? xs — only set breakpoints that differ.
Does NOT use 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).
Width is assigned by the parent ResponsiveRow as SizedBox(width: available * gridSize / 12) where available = totalWidth - spacing * (n - 1). The col widget itself is unaware of its width.

Breakpoints

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

Common patterns

// 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(),
)