flutter-building-layouts

SKILL.md

Master Flutter's constraint system to build responsive, overflow-free layouts efficiently.

Core principle: constraints flow down, sizes flow up, parents set position. Never pass unbounded constraints in flex boxes or scrollable regions.

Use Row/Column for linear layouts, Expanded/Flexible for space distribution, Stack for overlapping elements, and SizedBox for tight constraints.

Apply LayoutBuilder for responsive sizing or conditional rendering for adaptive layouts across mobile, tablet, and desktop form factors.

Follow a four-phase workflow: visual deconstruction, constraint planning, implementation from outside-in, and validation using Flutter Inspector's Debug Paint mode.

Architecting Flutter Layouts

Contents

Core Layout Principles

Structural Widgets

Adaptive and Responsive Design

Workflow: Implementing a Complex Layout

Examples

Core Layout Principles

Master the fundamental Flutter layout rule: Constraints go down. Sizes go up. Parent sets position.

Pass Constraints Down: Always pass constraints (minimum/maximum width and height) from the parent Widget to its children. A Widget cannot choose its own size independently of its parent's constraints.

Pass Sizes Up: Calculate the child Widget's desired size within the given constraints and pass this size back up to the parent.

Set Position via Parent: Define the x and y coordinates of a child Widget exclusively within the parent Widget. Children do not know their own position on the screen.

Avoid Unbounded Constraints: Never pass unbounded constraints (e.g., double.infinity) in the cross-axis of a flex box (Row or Column) or within scrollable regions (ListView). This causes render exceptions.

Structural Widgets