flutter-building-layouts
Installation
Summary
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/Columnfor linear layouts,Expanded/Flexiblefor space distribution,Stackfor overlapping elements, andSizedBoxfor tight constraints. - Apply
LayoutBuilderfor 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.
SKILL.md
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
xandycoordinates 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 (RoworColumn) or within scrollable regions (ListView). This causes render exceptions.