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