[flutter] Guesture Widget(제스처 위젯)의 종류

1. Flutter에서 Gesture를 지원하는 주요 위젯

Flutter에서 제스처를 감지하고 활용할 수 있는 주요 위젯들은 다음과 같습니다:

위젯 설명

GestureDetector	터치 이벤트(탭, 드래그, 스와이프 등)를 감지하는 기본 위젯
InkWell	머터리얼 디자인 효과를 포함한 터치 감지 위젯
ElevatedButton, TextButton, IconButton	기본적인 버튼 클릭 감지 위젯
Dismissible	스와이프하여 항목을 삭제할 수 있는 위젯
Draggable & DragTarget	드래그 앤 드롭을 지원하는 위젯
Slider	사용자가 슬라이드를 통해 값을 조정할 수 있는 위젯
Switch	ON/OFF 상태를 전환하는 위젯
PopupMenuButton	롱프레스 또는 탭으로 메뉴를 표시하는 위젯
ListView (scroll detection)	스크롤 동작을 감지할 수 있는 위젯

이제 각 위젯의 역할과 예제, 그리고 옵션들에 대해 자세히 살펴보겠습니다.

---

2. GestureDetector (가장 기본적인 제스처 감지 위젯)

GestureDetector는 탭, 더블탭, 롱프레스, 드래그 등 다양한 터치 이벤트를 감지하는 위젯입니다.

GestureDetector(
  onTap: () {
    print("화면이 탭되었습니다!");
  },
  onDoubleTap: () {
    print("더블탭 이벤트 발생!");
  },
  onLongPress: () {
    print("롱프레스 이벤트 발생!");
  },
  onPanUpdate: (details) {
    print("드래그 중: ${details.delta}");
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Center(child: Text("탭!")),
  ),
)

주요 옵션

• onTap: 화면이 탭되었을 때 실행되는 콜백 함수
• onDoubleTap: 두 번 빠르게 탭할 때 실행되는 콜백 함수
• onLongPress: 길게 누를 때 실행되는 콜백 함수
• onPanStart: 드래그 시작 시 실행되는 콜백 함수
• onPanUpdate: 드래그 중 위치 업데이트 감지
• onPanEnd: 드래그 종료 시 실행되는 콜백 함수
• behavior: 이벤트가 전달되는 방식 설정 (HitTestBehavior.opaque 사용 가능)

---

3. InkWell (머터리얼 디자인 터치 효과 포함)

InkWell은 머터리얼 디자인의 물결(Wave) 효과가 포함된 터치 감지 위젯입니다.

InkWell(
  onTap: () {
    print("InkWell 탭 이벤트 발생!");
  },
  splashColor: Colors.red,
  highlightColor: Colors.yellow,
  borderRadius: BorderRadius.circular(8.0),
  child: Container(
    width: 100,
    height: 100,
    child: Center(child: Text("InkWell!")),
  ),
)

주요 옵션

• splashColor: 터치 시 퍼지는 효과 색상 지정
• highlightColor: 터치 시 하이라이트 색상 지정
• borderRadius: 터치 효과의 테두리 모양 설정 가능
• onTap: 클릭 이벤트 감지
• onLongPress: 롱프레스 감지

---

4. 버튼 계열 (ElevatedButton, TextButton, IconButton)

Flutter의 버튼 계열 위젯들은 터치 이벤트를 감지하여 UI를 반응시킬 수 있습니다.

ElevatedButton(
  onPressed: () {
    print("버튼 클릭!");
  },
  onLongPress: () {
    print("롱프레스 이벤트 발생!");
  },
  style: ElevatedButton.styleFrom(
    primary: Colors.green,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
  child: Text("클릭!"),
)

주요 옵션

• onPressed: 버튼 클릭 이벤트
• onLongPress: 길게 눌렀을 때 이벤트
• style: 버튼의 색상, 그림자, 모양 등을 설정

---

5. Dismissible (스와이프하여 삭제)

Dismissible은 사용자가 왼쪽 또는 오른쪽으로 스와이프하여 항목을 삭제하는 기능을 제공합니다.

Dismissible(
  key: UniqueKey(),
  onDismissed: (direction) {
    print("아이템 삭제됨!");
  },
  background: Container(color: Colors.red),
  secondaryBackground: Container(color: Colors.blue),
  direction: DismissDirection.horizontal,
  child: ListTile(title: Text("스와이프하세요!")),
)

주요 옵션

• onDismissed: 삭제 이벤트 실행
• direction: 스와이프 방향 설정 가능 (DismissDirection.horizontal, DismissDirection.vertical)
• background: 삭제 시 배경으로 표시할 위젯
• secondaryBackground: 반대 방향 스와이프 시 배경

---

6. Draggable & DragTarget (드래그 앤 드롭 지원)

Flutter에서 드래그 앤 드롭을 구현할 때 사용하는 위젯입니다.

Draggable(
  data: "드래그 데이터",
  feedback: Container(
    width: 50,
    height: 50,
    color: Colors.red,
    child: Center(child: Text("드래그 중")),
  ),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
    child: Center(child: Text("드래그!")),
  ),
)

주요 옵션

• data: 드래그할 데이터 값
• feedback: 드래그 중 표시할 UI
• childWhenDragging: 드래그 중 원래 위치에서 보여줄 UI
• onDragCompleted: 드래그가 완료되었을 때 호출
• onDraggableCanceled: 드래그가 취소되었을 때 호출

---

7. Slider (드래그하여 값 조정)

Slider는 사용자가 드래그하여 값을 조정할 수 있는 UI 위젯입니다.

Slider(
  value: 50,
  min: 0,
  max: 100,
  divisions: 10,
  label: "현재 값: 50",
  onChanged: (newValue) {
    print("슬라이더 값: $newValue");
  },
)

주요 옵션

• value: 현재 값
• onChanged: 값 변경 이벤트
• min / max: 최소/최대 값 설정
• divisions: 값 조정 간격 설정
• label: 슬라이더 값 표시

---

8. Switch (ON/OFF 전환)

Switch(
  value: true,
  activeColor: Colors.green,
  inactiveThumbColor: Colors.grey,
  onChanged: (value) {
    print("스위치 상태: $value");
  },
)

주요 옵션

• value: 현재 상태 값
• onChanged: 상태 변경 이벤트
• activeColor: ON 상태일 때 색상
• inactiveThumbColor: OFF 상태일 때 스위치 색상