[Flutter] 이벤트 감지 Widget <Inkwell & GestureDetector>

Ann·2025년 2월 26일
1

Flutter

목록 보기
5/6

✅ InkWell 와 GestureDetector

InkWell

🔹InkWell은 Flutter의 머티리얼 디자인(Material Design) 에서 제공하는 터치 피드백 위젯입니다. 사용자가 탭(Tap)하면 물결 효과(Ripple Effect) 가 나타나며, 기본적으로 onTap, onLongPress, onDoubleTap 등의 터치 이벤트를 감지할 수 있습니다.

GestureDetector

🔹GestureDetector는 다양한 터치 이벤트를 감지하는 다목적 제스처 감지 위젯 입니다.
InkWell과 달리 물결 효과는 없지만, 탭, 드래그(Drag), 스와이프(Swipe), 확대/축소(Zoom), 회전(Rotate) 등 광범위한 제스처를 감지할 수 있습니다.



✅ InkWell

📌 특징

🔹머티리얼 디자인의 터치 피드백(물결 효과, Ripple Effect) 을 제공하는 위젯
🔹탭(Tap), 더블탭(Double Tap), 롱프레스(Long Press) 등의 기본적인 제스처 감지 가능
🔹Material 위젯 내부에서 사용해야 함 (없으면 터치 효과가 표시되지 않음)

📌 주요 속성

속성설명
onTap클릭 시 호출되는 콜백
onDoubleTap더블탭 시 호출되는 콜백
onLongPress길게 누를 때 호출되는 콜백
onTapDown사용자가 터치하는 순간 호출
onTapCancel터치하다가 취소되었을 때 호출
borderRadius물결 효과의 모서리 둥글기
splashColor물결 효과 색상
highlightColor터치 시 배경 색상 변화




✅ GestureDetector

📌 특징

🔹터치 피드백 효과가 없음 → 물결 효과 없이 터치 이벤트 감지만 필요할 때 사용
🔹InkWell보다 훨씬 다양한 제스처(스와이프, 드래그, 확대 등)를 감지할 수 있음
🔹Material 없이도 사용 가능
🔹Behavior 속성을 활용해 터치 감지 영역 조절 가능

📌 주요 속성

속성설명
onTap클릭 시 호출되는 콜백
onDoubleTap더블탭 시 호출되는 콜백
onLongPress길게 누를 때 호출되는 콜백
onVerticalDragStart위아래 드래그 시작 시 호출
onHorizontalDragStart좌우 드래그 시작 시 호출
onScaleStart핀치 줌(확대/축소) 시작 시 호출
behavior터치 감지 방식을 설정 (opaque, translucent 등)



🎯 InkWell vs GestureDetector 비교


비교 항목InkWellGestureDetector
머티리얼 효과✅ 있음 (Ripple 효과)❌ 없음
터치 감지 이벤트기본 이벤트 (onTap, onLongPress 등)거의 모든 터치 이벤트 가능
드래그 감지❌ 불가능✅ 가능 (onHorizontalDragUpdate 등)
확대/축소 감지❌ 불가능✅ 가능 (onScaleStart 등)
제스처 감지 범위borderRadius, splashColor 등으로 조정 가능behavior 속성으로 조정 가능
Material 필요 여부✅ Material 필요❌ Material 없이 사용 가능



💡 언제 InkWell을 쓰고, 언제 GestureDetector를 써야 할까?

✅ InkWell을 사용할 때

🔹버튼처럼 클릭 가능한 요소에 머티리얼 디자인 효과를 주고 싶을 때
🔹탭(Tap) 이벤트만 감지하는 경우


✅ GestureDetector를 사용할 때

🔹드래그, 스와이프, 확대/축소(핀치 줌) 등 다양한 터치 이벤트를 감지할 때
🔹물결 효과 없이 터치만 감지해야 할 때



🔥 N줄 요약

🔹InkWell은 머티리얼 디자인의 클릭 피드백을 제공하는 기본적인 터치 위젯
🔹GestureDetector는 모든 제스처를 감지할 수 있는 강력한 이벤트 핸들러
🔹버튼 UI를 만들 때는 InkWell이 적합, 드래그/스와이프/확대 기능이 필요하면 GestureDetector를 사용

0개의 댓글