2025.12.31 (수)
UI 코드 구조화 및 바텀 오버플로우 해결
🍎 UI 코드 구조화 및 바텀 오버플로우 해결
오늘은 두가지의 문제가 있었다. 바텀 구현 중에 코드가 너무 길어져서 가독성이 떨어지는 문제와 화면 하단 위젯 오버플로우 현상이었다.
📌 코드 구조화
🔻 [문제 상황]
detail_page 내부에 Bottom Bar를 직접 구현하다 보니, 전체 코드의 길이가 너무 길어져서 찾기 힘든 문제가 있었다.이로 인해 특정 기능을 수정할 때 코드를 찾기 어렵고 전체적인 가독성이 떨어지는 것을 느꼈다.
🔻 [해결 방법]
Flutter의 컴포넌트 기반 개발 방식을 활용하여 하단 바 영역을 별도의 위젯 클래스로 분리했다.
-
기존:
Scaffold의bottomNavigationBar속성에 긴 코드를 직접 작성. -
변경:
DetailPageBottomNavigationBar라는 별도의StatefulWidget으로 빼서 파일에서 관리
💡 오늘의 핵심: 위젯을 분리하면 detail_page.dart는 전체적인 구조(레이아웃)에만 집중할 수 있고, 하단 바 로직은 전용 위젯 파일에서 독립적으로 관리할 수 있어 매우 편했다. 협업을 하고 있기에 팀원들이 추가할 기능이나 찾아야되는 부분을 쉽게 찾을 수 있을 것 같다.1!
📌 바텀 오버플로우(Bottom Overflow)
🔻 [문제 상황]
IconButton을 담고 있는 Container 화면 하단에서 오버플로우가 생겼다.
- 원인:
Container의 높이(height: 50)와 너비(width: 80)를 고정적으로 설정했으나, 그 안에 들어가는IconButton들과Text위젯의 합산 크기가 설정된 범위를 초과한 것 같다.
🔻 [해결 방법]
고정된 수치 대신 여유 있는 공간 확보와 패딩(Padding)을 활용하여 레이아웃을 유연하게 조정했다
-
높이 확장: 부모 컨테이너의 높이를 50에서 80으로 늘려 내부 위젯을 늘려줌
-
고정 너비 제거: 내부 컨테이너의 width: 80 제약을 제거하거나 조정하여, 버튼과 텍스트가 가로로 충분히 배치될 수 있도록 수정했다
-
패딩 활용:
EdgeInsets.all(10.0)등을 사용하여 위젯 간의 간격을 조절했다
✅ 오늘의 학습 요약 (Checklist)
❎ 위젯 추출
코드가 길어지면 주저하지 말고 새로운 파일이나 클래스로 분리할 것.
❎ 고정크기 확인
위젯에 고정 크기(width, height)를 줄 때는 내부 자식 위젯들의 크기를 항상 고려할 것.
❎ 디버깅
하단 오버플로우 발생 시, 가장 먼저 부모 위젯의 height와 자식 위젯의 Padding 값을 점검할 것.
