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

Identify each group as primarily vertical, horizontal, overlapping, scrolling, or wrapping.
Start vertical groups with Column and horizontal groups with Row.
Nest small, named widgets instead of building one deeply nested build method.
Use Expanded, Flexible, and Spacer to distribute bounded free space.
Add padding, alignment, aspect ratio, and constraints intentionally.
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

Use them when they serve a concrete purpose, such as:

true visual overlap, badges, floating controls, or anchored decoration
touch-target minimums, icon sizes, thumbnails, or bounded media
intentional maximum reading width
aspect-ratio requirements
platform or design-system constants

State the purpose in the code structure or a brief comment when it is not obvious.

Constraint safety

Put Expanded and Flexible only under Row, Column, or Flex.
Do not use non-zero flex along an unbounded main axis. In a vertical scrollable, remove vertical Expanded or Flexible, or establish a meaningful finite constraint.
Fix a nested Column that needs the outer column's remaining height by wrapping the inner column in Expanded.
Diagnose overflow by inspecting constraints and variable content before adding clipping or smaller hardcoded sizes.
Prefer scrolling for content that legitimately exceeds available space.

Preferred pattern

Padding(
  padding: const EdgeInsets.all(16),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: [
      const Header(),
      const SizedBox(height: 16),
      Expanded(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Flexible(flex: 2, child: PrimaryContent()),
            const SizedBox(width: 16),
            const Flexible(child: SecondaryContent()),
          ],
        ),
      ),
      const SizedBox(height: 16),
      const Actions(),
    ],
  ),
)

Change this composition at a breakpoint if the horizontal content cannot remain usable on a narrow screen; do not merely squeeze it.

Visual references

Inspect these diagrams when decomposing a mockup into nested flex layouts:

Pavlova Row and Column layout shows the overall horizontal Row containing a vertical content Column and an image.
Nested Row and Column diagram shows smaller rating and icon groups decomposed into nested Row and Column widgets.

Use the diagrams as structural references, not as fixed pixel templates.

Verification

Confirm no RenderFlex overflow at supported viewport sizes.
Confirm text wraps or truncates intentionally.
Confirm flexible children receive bounded constraints.
Confirm scrollable content remains reachable.
Confirm fixed sizes and Stack or Positioned usages have a concrete design reason.

About this skill