flutter-use-column-row-first

Start with Column for vertical groups and Row for horizontal groups, then use Expanded, Flexible, and Spacer to distribute free space. Add LayoutBuilder or breakpoints when the composition itself must change with available width, and test at narrow and wide sizes.

Use Expanded when a child must fill its allocated share of remaining main-axis space inside a Row or Column. Use Flexible when the child may be smaller than its share, and use the flex property only to express proportional allocation between siblings.

RenderFlex overflow happens when content exceeds bounded space, often because a Column does not scroll or a child has unbounded constraints. Wrap overflowing content in a ListView, wrap a nested Column in Expanded, or use Flexible so children yield space.

Stack with hardcoded Positioned coordinates should not be the default layout mechanism because it breaks under different screen sizes and text scaling. Reserve it for true visual overlap such as badges, floating controls, or anchored decoration with a stated purpose.

Use the Wrap widget when horizontal children should move onto another run instead of shrinking or overflowing. Row itself does not wrap, so Wrap is the correct choice for variable-width chip groups or tag lists.