[Flutter] Bottom Navigation Bar 클릭 범위 문제 해결기 – InkWell과 Expanded의 조합

Flutter로 앱을 만들다 보면 바텀바(Bottom Navigation Bar)를 직접 커스터마이징하는 일이 자주 생깁니다.
레거시 코드에서 탭 아이콘 근처는 눌리는데 탭 바 전체가 클릭되지 않는 문제가 생겼어요.
이번 포스팅에서는 이 문제를 어떻게 해결했는지 소개해볼게요!

 

📌 문제 상황

기존에는 각 바텀 탭을 이렇게 고정된 너비의 SizedBox로 감싸있었습니다.

SizedBox(
  width: 60,
  child: Column(
    children: [...],
  ),
)

겉보기에는 괜찮았지만, 실제로 탭 주변을 눌렀을 땐 반응이 없었습니다.
클릭 가능한 영역이 아이콘 주변으로 제한되어 있었던 것이죠. 😭

 

 

💡 목표

• 바텀바 탭은 항상 영역 전체가 클릭 가능해야 함
• 뷰 간격이나 UI 배치는 유지하면서도 터치 영역만 넓히기

---

✅ 개선 방법

핵심은 두 가지입니다:

1. 각 탭을 Expanded로 감싸서 수평으로 남은 공간을 고르게 분배
2. InkWell을 사용해 클릭 가능한 터치 피드백을 제공

---

✨ 개선된 코드 구조

Expanded(
  child: InkWell(
    onTap: () => onTabSelected(index),
    child: Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SvgPicture.asset(...),
          Text(...),
        ],
      ),
    ),
  ),
)

---

🧱 전체 구조는 이렇게 됩니다

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: _buildTabs(), // 각 탭이 Expanded로 감싸져 있음
)

그리고 _buildTabs() 안에서는 이렇게 구성합니다:

tabs.add(
  Expanded(
    child: _buildTab(
      label: ...,
      index: ...,
      isSelected: ...,
      iconOn: ...,
      iconOff: ...,
    ),
  ),
);

 

---

👀 적용 전/후 비교

항목적용 전적용 후

클릭 범위	아이콘 주변만 반응	전체 탭 영역 반응
UI 배치	고정된 width 사용	자동 균등 분배 (Expanded)
터치 피드백	없음 또는 일부만 있음	InkWell로 전 영역 피드백

---

📝 후기

이번 리팩터링으로 작지만 중요한 사용자 경험 차이를 해결할 수 있었습니다.
Flutter는 UI 구조가 명확해서 이런 조정이 가능하다는 점에서 참 매력적이에요.

바텀바를 커스텀으로 구성하실 때는
꼭! Expanded + InkWell 조합으로 클릭 영역과 터치 반응을 보장해주세요 😊