📐
Flutter 레이아웃 시스템
Row, Column, Stack, Flex로 UI 배치하기
Flutter 레이아웃은 CSS Flexbox와 유사하지만, 모든 것이 위젯 기반입니다.
Row(가로 배치), Column(세로 배치), Stack(겹침 배치)이 기본 3요소이며, Expanded와 Flexible로 남은 공간을 분배합니다.
레이아웃의 핵심 규칙: 부모가 자식에게 제약조건(Constraints)을 전달하고, 자식은 그 안에서 자신의 크기(Size)를 결정하며, 부모가 최종 위치를 정합니다.
구현 순서
1
Row/Column으로 기본 수평/수직 배치 연습
2
Expanded/Flexible로 비율 기반 공간 분배
3
Stack + Positioned로 오버레이 UI 구현
4
LayoutBuilder와 MediaQuery로 반응형 레이아웃 구현
장점
- ✓ CSS보다 예측 가능한 레이아웃 동작
- ✓ DevTools에서 레이아웃 디버깅이 시각적으로 쉬움
단점
- ✗ Unbounded 에러 (Column 안의 ListView 등) 초보자가 자주 만남
- ✗ 위젯 중첩이 깊어지면 가독성 저하
사용 사례
로그인/회원가입 폼 레이아웃
대시보드 카드 그리드 배치