강의를 수강하며 내가 알고 있던 상식과는 다른 점들이 여럿 보였다.
그 중 가장 눈에 거슬리던 부분은 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만 사용하게 되면 사용자가 버튼을 클릭했을 때, 시각적 표시를 할 수 없다.
눌렀을 때 시각적 피드백이 필요한 경우에는 InkWell이나 CupertinoButton 등 다른 위젯을 사용해야한다.