트러블슈팅: CircleAvatar로 프로필 이미지 UI 구현 시 크기 제약 문제

 문제 상황

WelcomePage 화면에서 사용자 프로필 이미지 업로드 UI를 구현하려 했음.
CircleAvatar 위젯을 사용해 원형 이미지와 회색 배경을 적용하고, 향후 이미지 업로드 기능까지 확장하려 했음.

그러나 아래와 같은 제약이 발생함:

• CircleAvatar는 radius만 지원하고 width / height를 따로 지정할 수 없음
• 정사각형 이상 비율의 유연한 레이아웃에서 이미지가 제대로 배치되지 않음
• 위젯 크기 확장이 직관적이지 않아, 다양한 해상도/화면에서 UI 깨짐 현상 발생 가능

---

 고민한 방법

1. CircleAvatar의 radius 값을 조절해보며 대응 시도
2. SizedBox, FittedBox 등 래핑하여 대응 시도
3. 원형 배경 유지하면서도 직관적으로 크기 제어 가능한 위젯 탐색

---

 선택한 해결 방법

Container 위젯으로 전환하고, BoxDecoration을 통해 원형 스타일을 수동 적용함.
이를 통해 아래와 같은 효과를 동시에 만족시킬 수 있었음:

• width / height 명시 가능 → 원하는 크기 자유롭게 설정
• decoration으로 원형 배경, 색상, 테두리 등 세부 스타일링 가능
• 이후 프로필 이미지 업로드 기능 확장 시 DecorationImage 활용 가능

적용 코드 예시:

Container(
  width: 80,
  height: 80,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    color: Colors.grey[300],
  ),
  child: Icon(Icons.person, size: 40),
)

---

 향후 고려 사항

• 이미지 업로드 후에는 Container의 decoration.image에 NetworkImage 혹은 FileImage 적용 예정
• 추후 사용자의 프로필 이미지 존재 여부에 따라 기본 아이콘/이미지 전환 로직 추가 예정
• 다른 페이지(예: 채팅 목록, 채팅방 등)에서도 동일 방식 재활용 가능

---

 결론

• CircleAvatar는 간단한 프로필 아이콘에 유용하지만, 크기나 스타일링에 제약이 있음
• 보다 유연하고 세밀한 UI 조절이 필요할 경우, Container + BoxDecoration(shape: BoxShape.circle) 조합이 효과적임