# Flutter Use Column Row First

Use when building any Flutter screen or component to choose responsive Row, Column...

- Repository: https://github.com/evanca/flutter-ai-rules (668 stars)
- Category: Mobile
- License: MIT
- Last updated: 2026-10-30
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add evanca/flutter-ai-rules --skill flutter-use-column-row-first -g -a claude-code -y`
Codex: `npx skills add evanca/flutter-ai-rules --skill flutter-use-column-row-first -g -a codex -y`
Cursor: `npx skills add evanca/flutter-ai-rules --skill flutter-use-column-row-first -g -a cursor -y`
Gemini CLI: `npx skills add evanca/flutter-ai-rules --skill flutter-use-column-row-first -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add evanca/flutter-ai-rules`

## Description

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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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 sibling with `flex: 1`.
- Use `Spacer` for flexible separation between siblings. Use `SizedBox` for deliberate, fixed gaps.
- Wrap text or other variable-width content in `Expanded` or `Flexible` inside a `Row` when it must yield space to siblings.
- Use `ListView` or another scrollable when vertical content can exceed the viewport; `Column` does not scroll.
- Use `Wrap` when horizontal children should move onto another run instead of shrinking or overflowing.
- Use `LayoutBuilder`, breakpoints, or adaptive widgets when the composition itself must change with available space.
- Use `SafeArea` when content must avoid system intrusions.

## Avoid rigid layouts

Avoid these as default layout mechanisms:

The rest: https://github.com/evanca/flutter-ai-rules/blob/HEAD/skills/flutter-use-column-row-first/SKILL.md