[TIL] SizedBox + GestureDetector

김영광·2026년 1월 8일

강의를 수강하며 내가 알고 있던 상식과는 다른 점들이 여럿 보였다.
그 중 가장 눈에 거슬리던 부분은 iconButton이나 textButton을 사용하지 않는 부분이었다.

🔎 iconButton, textButton을 버려야 하나?

compose에서도 iconButton으로 간단하게 onClick 메서드를 구현하던 기억이 난다.
flutter에서도 iconButton이 따로 존재해 편하게 사용하고 있었다.
하지만, flutter에서도 compose의 box + clickable 조합을 사용하는 이유가 있나 해서 찾아봤다.

❗ 구글 디자인

iconButton과 textButton은 구글의 Material Design을 강력하게 따른다.
내부적으로 최소 크기가 48*48로 정해져 있으며, 패딩과 마진, 클릭 애니메이션까지 지정되어 있다.
하지만, 디자인 요구사항이 물결 효과가 없어야한다거나 패딩이 없어여 할 때 커스터마이징하는 코드를 작성하기가 까다롭다.

반면 SizedBox + GestureDetector 조합은 개발자가 정의한 크기와 모양 외에는 어떠한 성질도 가지지 않는다.
미세한 레이아웃이나 커스텀 UI를 만들때 압도적인 유연성을 가진다.

❗ 편리성 및 제어

iconButton과 textButton은 아이콘 크기가 작으면 클릭하기 힘들다는 단점이 있다.
하지만 SizedBox의 behavior 속성에 HitTestBeHavior.opaque를 넣어주게 되면, 투명한 공간을 포함한 전체 영역을 클릭 가능하게 만들 수 있다.

또, iconButton은 onPressed 속성만 지원하는데 비해 GestureDetector는 onLongPress, onDoubleTap 등 추가적인 제스처 이벤트를 지정해줄 수 있다.

❗ 성능 측면

일반적인 앱에서는 이정도 성능은 무시해도 될 정도로 미미하다.
하지만, 굳이 들여다보자면 iconButton이 살짝 불리하다.

iconButton은 padding, Aling, InkResponse 등을 결합한 복합 위젯이다.
반면, GestureDetector는 좀 더 로우 레벨의 위젯으로 미세하게 가벼울 수 있다.

⚠️ GestureDetector 사용 시 주의사항

GestureDetector만 사용하게 되면 사용자가 버튼을 클릭했을 때, 시각적 표시를 할 수 없다.
눌렀을 때 시각적 피드백이 필요한 경우에는 InkWell이나 CupertinoButton 등 다른 위젯을 사용해야한다.

profile
주니어 개발자

0개의 댓글