flutter-use-column-row-first

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:

• Stack with hardcoded Positioned coordinates
• Container, SizedBox, or ConstrainedBox with hardcoded screen-like width or height
• offsets, transforms, or margins used to simulate normal document flow
• screen dimensions copied from a mockup