Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.
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
don't have the plugin yet? install it then click "run inline in claude" again.