flutter-use-column-row-first
Use when building any Flutter screen or component to choose responsive Row, Column, Expanded, Flexible, and Spacer layouts before fixed-size or coordinate-based alternatives.
npx skills add evanca/flutter-ai-rules --skill flutter-use-column-row-first --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Flutter Use Column Row First Build responsive Flutter layouts from the constraint system outward. Prefer simple flex composition and introduce fixed dimensions or overlays only when the design requires them for a concrete purpose. ## Layout workflow 1. Identify each group as primarily vertical, horizontal, overlapping, scrolling, or wrapping. 2. Start vertical groups with `Column` and horizontal groups with `Row`. 3. Nest small, named widgets instead of building one deeply nested `build` method. 4. Use `Expanded`, `Flexible`, and `Spacer` to distribute bounded free space. 5. Add padding, alignment, aspect ratio, and constraints intentionally. 6. Test narrow and wide constraints, text scaling, keyboard appearance, and long or localized content. ## Rules - Prefer `Column` for vertical flow and `Row` for horizontal flow. - Control alignment with `mainAxisAlignment`, `crossAxisAlignment`, and `mainAxisSize`. - Use `Expanded` when a child must fill its allocated share of remaining main-axis space. - Use `Flexible` when a child may use less than its allocated share. - Use `flex` only to express proportional allocation. A child with `flex: 2` receives twice the free-space share of a sib
- Layout workflow
- Rules
- Avoid rigid layouts
- Constraint safety
- Preferred pattern
- Visual references
- Verification
- Sources
What does the flutter-use-column-row-first skill do?
Use when building any Flutter screen or component to choose responsive Row, Column, Expanded, Flexible, and Spacer layouts before fixed-size or coordinate-based alternatives.
How do I install it?
Run `npx skills add evanca/flutter-ai-rules --skill flutter-use-column-row-first --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From evanca/flutter-ai-rules, a repository with 604 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.