← ClaudeAtlas

flutter-building-layoutslisted

Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.
openplaybooks-dev/converge · ★ 3 · AI & Automation · score 74
Install: claude install-skill openplaybooks-dev/converge
# Architecting Flutter Layouts ## Contents - [Core Layout Principles](#core-layout-principles) - [Structural Widgets](#structural-widgets) - [Adaptive and Responsive Design](#adaptive-and-responsive-design) - [Workflow: Implementing a Complex Layout](#workflow-implementing-a-complex-layout) - [Examples](#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 Select the appropriate structural Widget based on the required spatial arrangement. * **Use `Row` and `Column`:** Implement `Row` for horizontal linear layouts and `Column` for vertical linear layouts. Control child alignment using `mainAxisAlignment` and `crossAxisAlignment`. * **Use `