위젯 규칙 정리

김동연·2026년 4월 3일

개발기록일지(Flutter)

목록 보기
30/32

1. Column / Row 크기

  • Column은 “크기 선언” 위젯이 아님. 부모 제약 안에서 자식 배치.
  • Column 가로(교차축): 자식들이 필요로 하는 가로 중 최댓값에 맞춰지는 경우가 많음(부모 maxWidth 한도 내).
  • Column 세로(주축): 위→아래 합(sum). Spacer/Expanded는 남는 세로 공간 분배.
  • Row는 축이 바뀜: 세로는 보통 자식 높이 최댓값 쪽, 가로는 또는 Expanded 분배.
  • “children 중 가장 큰 위젯 하나 = Column 전체 크기”는 항상 성립하지 않음. 부모 제약·mainAxisSize·Intrinsic* 등에 따라 변함.

2. SizedBox.expand

  • “화면을 넓힌다”가 아니라 부모가 허용하는 최대로 맞춤. 부모가 작으면 그만큼만 큼.
  • ColumnSizedBox.expand로 감싸면 그때 부모가 준 최대 영역(보통 body 전체, SafeArea/Padding 있으면 그 안)을 쓰기 쉬움.

3. 설정 안 할 때: 부모 vs 자식

  • 부모 → 자식: 제약(최소·최대 너비·높이) 전달.
  • 자식 크기 미지정: 위젯마다 내용 최소 또는 가능한 만큼 확장기본 규칙이 있음.
  • Align/Center: 넓게 퍼진 뒤 자식 블록만 정렬.
  • Expanded/Flexible: Row/Column/Flex 내부에서만 의미 있음. 주축 남는 공간 분배.
  • ListView 등 스크롤: 한 축에서 제약이 특이함 → Column과 조합 시 무한 높이 이슈 자주 남.

한 줄: “설정 없음 = 부모만 따름”이 아니라 부모 제약 + 위젯 기본 레이아웃 규칙임.


4. 초반 실수

  1. Column 안에 내용 많음 → overflow. 대응: SingleChildScrollView / ListView / Expanded 등.
  2. Column 안에 ListView 그대로 넣음 → 높이 제약 충돌. 대응: Expanded(child: ListView) 또는 shrinkWrap+physics 등 구조 변경.
  3. Center만으로 “세로 간격 만족” 기대 → Center덩어리 중앙 배치. Spacer 조합과 역할 다름.
  4. 테마에 minimumSize 가로 infinity → 레이아웃·내부 위젯 이상 가능. 풀 너비는 SizedBox(width: double.infinity, child: …) 쪽이 안전한 경우 많음.
  5. build 안에서 setState → 무한 rebuild 위험.
  6. dispose 이후 setState → 에러.
  7. async 끝난 뒤 contextNavigator 등 → mounted / context.mounted 체크 필요.
  8. const 구성 깨짐(부모·자식 불일치).
  9. pubspec assets·경로 누락.
  10. main/전역 변경은 핫 리스타트 필요한 경우 있음.

5. 기타 헷갈림

  • mainAxisSize: min은 내용만큼, max(기본)는 주축으로 남는 공간까지 쓰려는 성향(부모 제약에 따름).
  • width: double.infinity인데 안 늘어남: 상위가 가로를 막거나 IntrinsicWidth 등 다른 위젯 영향.
  • Text overflow: maxLines·overflow 또는 Flexible/Expanded.
  • Stack: 먼저 적은 자식이 아래, 뒤가 위(그리기 순서).
  • Theme.of / MediaQuery.of: 트리에서 가장 가까운 상위 값.
  • Navigator.of(context): 가장 가까운 Navigator — 탭마다 스택 다르면 잘못된 push 가능.

0개의 댓글