👆 Flutter 위젯 시리즈: GestureDetector & InkWell 완전 정복

Flutter에서 터치 이벤트(클릭, 드래그, 더블탭 등)를 처리하려면 반드시 GestureDetector나 InkWell을 사용해야 합니다.
이 둘의 차이와 실무 사용 팁을 깔끔히 정리해드립니다!

---

✅ 1. GestureDetector란?

GestureDetector는 터치 제스처 감지용 기본 위젯입니다.
클릭, 더블탭, 롱프레스, 드래그 등 다양한 제스처를 감지할 수 있어요.

GestureDetector(
  onTap: () {
    print('탭!');
  },
  onDoubleTap: () {
    print('더블 탭!');
  },
  onLongPress: () {
    print('롱 프레스!');
  },
  child: Container(
    color: Colors.amber,
    padding: EdgeInsets.all(20),
    child: Text('터치해보세요'),
  ),
)

✔️ 배경색과 함께 클릭 가능!

---

✅ 2. InkWell이란?

InkWell은 머티리얼 디자인에서 ripple(물결) 효과를 제공하는 터치 위젯입니다.
즉, 터치 시 물결 효과가 생겨 더 자연스러운 버튼 UX를 만듭니다.

InkWell(
  onTap: () {
    print('InkWell 탭!');
  },
  child: Container(
    padding: EdgeInsets.all(20),
    child: Text('InkWell로 터치해보세요'),
  ),
)

✔️ Container가 Material 위젯 안에 있어야 물결 효과가 잘 나타납니다.

---

✅ 3. GestureDetector vs InkWell

구분	GestureDetector	InkWell
기능	제스처 감지 전용 (모든 제스처)	터치 + 머티리얼 효과
효과	효과 없음	Ripple(물결) 효과 제공
권장 사용	제스처 로직 필요할 때	버튼/카드 클릭 효과 필요할 때

---

✅ 4. InkWell + Material 예시

InkWell은 반드시 Material 위젯이 부모로 있어야 합니다.

Material(
  color: Colors.transparent,
  child: InkWell(
    onTap: () {},
    child: Container(
      padding: EdgeInsets.all(20),
      child: Text('InkWell + Material'),
    ),
  ),
)

✔️ InkWell 단독으로는 물결 효과가 보이지 않으니 주의!

---

✅ 5. 실무에서 자주 쓰는 팁

• 복잡한 제스처는 GestureDetector 사용
• 버튼 클릭 효과는 InkWell + Material 조합 사용
• 커스텀 버튼 → GestureDetector 대신 InkWell 활용

---

📌 다음 편 예고

• 👉 위젯 시리즈: Flutter Dialog & BottomSheet 제대로 쓰는 법