InkWell
🔹InkWell은 Flutter의 머티리얼 디자인(Material Design) 에서 제공하는 터치 피드백 위젯입니다. 사용자가 탭(Tap)하면 물결 효과(Ripple Effect) 가 나타나며, 기본적으로 onTap, onLongPress, onDoubleTap 등의 터치 이벤트를 감지할 수 있습니다.
GestureDetector
🔹GestureDetector는 다양한 터치 이벤트를 감지하는 다목적 제스처 감지 위젯 입니다.
InkWell과 달리 물결 효과는 없지만, 탭, 드래그(Drag), 스와이프(Swipe), 확대/축소(Zoom), 회전(Rotate) 등 광범위한 제스처를 감지할 수 있습니다.
📌 특징
🔹머티리얼 디자인의 터치 피드백(물결 효과, Ripple Effect) 을 제공하는 위젯
🔹탭(Tap), 더블탭(Double Tap), 롱프레스(Long Press) 등의 기본적인 제스처 감지 가능
🔹Material 위젯 내부에서 사용해야 함 (없으면 터치 효과가 표시되지 않음)
📌 주요 속성
속성 | 설명 |
---|---|
onTap | 클릭 시 호출되는 콜백 |
onDoubleTap | 더블탭 시 호출되는 콜백 |
onLongPress | 길게 누를 때 호출되는 콜백 |
onTapDown | 사용자가 터치하는 순간 호출 |
onTapCancel | 터치하다가 취소되었을 때 호출 |
borderRadius | 물결 효과의 모서리 둥글기 |
splashColor | 물결 효과 색상 |
highlightColor | 터치 시 배경 색상 변화 |
📌 특징
🔹터치 피드백 효과가 없음 → 물결 효과 없이 터치 이벤트 감지만 필요할 때 사용
🔹InkWell보다 훨씬 다양한 제스처(스와이프, 드래그, 확대 등)를 감지할 수 있음
🔹Material 없이도 사용 가능
🔹Behavior 속성을 활용해 터치 감지 영역 조절 가능
📌 주요 속성
속성 | 설명 |
---|---|
onTap | 클릭 시 호출되는 콜백 |
onDoubleTap | 더블탭 시 호출되는 콜백 |
onLongPress | 길게 누를 때 호출되는 콜백 |
onVerticalDragStart | 위아래 드래그 시작 시 호출 |
onHorizontalDragStart | 좌우 드래그 시작 시 호출 |
onScaleStart | 핀치 줌(확대/축소) 시작 시 호출 |
behavior | 터치 감지 방식을 설정 (opaque, translucent 등) |
비교 항목 | InkWell | GestureDetector |
---|---|---|
머티리얼 효과 | ✅ 있음 (Ripple 효과) | ❌ 없음 |
터치 감지 이벤트 | 기본 이벤트 (onTap, onLongPress 등) | 거의 모든 터치 이벤트 가능 |
드래그 감지 | ❌ 불가능 | ✅ 가능 (onHorizontalDragUpdate 등) |
확대/축소 감지 | ❌ 불가능 | ✅ 가능 (onScaleStart 등) |
제스처 감지 범위 | borderRadius, splashColor 등으로 조정 가능 | behavior 속성으로 조정 가능 |
Material 필요 여부 | ✅ Material 필요 | ❌ Material 없이 사용 가능 |
🔹버튼처럼 클릭 가능한 요소에 머티리얼 디자인 효과를 주고 싶을 때
🔹탭(Tap) 이벤트만 감지하는 경우
🔹드래그, 스와이프, 확대/축소(핀치 줌) 등 다양한 터치 이벤트를 감지할 때
🔹물결 효과 없이 터치만 감지해야 할 때
🔹InkWell은 머티리얼 디자인의 클릭 피드백을 제공하는 기본적인 터치 위젯
🔹GestureDetector는 모든 제스처를 감지할 수 있는 강력한 이벤트 핸들러
🔹버튼 UI를 만들 때는 InkWell이 적합, 드래그/스와이프/확대 기능이 필요하면 GestureDetector를 사용