GestureDetector 위젯

GestureDetector 위젯은 Flitter에서 사용자 상호작용을 처리하는 주요 방법입니다. 자식 위젯을 감싸고 다양한 제스처와 마우스 이벤트를 감지합니다.

지원하는 제스처

클릭 제스처

• onClick: 클릭 이벤트 처리

GestureDetector({
  onClick: () => console.log("클릭됨"),
  child: /* widget */
})

마우스 이벤트

• onMouseDown: 마우스 버튼이 눌렸을 때
• onMouseMove: 마우스가 이동할 때
• onMouseUp: 마우스 버튼이 떼어질 때
• onMouseOver: 마우스가 위젯 위에 있을 때
• onMouseEnter: 마우스가 위젯에 들어올 때
• onMouseLeave: 마우스가 위젯을 떠날 때

GestureDetector({
  onMouseDown: (e) => console.log("마우스 다운", e),
  onMouseMove: (e) => console.log("마우스 이동", e),
  onMouseUp: (e) => console.log("마우스 업", e),
  onMouseEnter: (e) => console.log("마우스 진입", e),
  onMouseLeave: (e) => console.log("마우스 이탈", e),
  child: /* widget */
})

드래그 제스처

• onDragStart: 드래그 시작 시
• onDragMove: 드래그 중
• onDragEnd: 드래그 종료 시

GestureDetector({
  onDragStart: (e) => console.log("드래그 시작", e),
  onDragMove: (e) => console.log("드래그 중", e),
  onDragEnd: (e) => console.log("드래그 종료", e),
  child: /* widget */
})

휠 이벤트

• onWheel: 마우스 휠 스크롤

GestureDetector({
  onWheel: (e) => console.log("휠 이벤트", e),
  child: /* widget */
})

사용 가능한 속성

• onClick: (event: MouseEvent) => void
• onMouseDown: (event: MouseEvent) => void
• onMouseMove: (event: MouseEvent) => void
• onMouseUp: (event: MouseEvent) => void
• onMouseOver: (event: MouseEvent) => void
• onMouseEnter: (event: MouseEvent) => void
• onMouseLeave: (event: MouseEvent) => void
• onDragStart: (event: MouseEvent) => void
• onDragMove: (event: MouseEvent) => void
• onDragEnd: (event: MouseEvent) => void
• onWheel: (event: WheelEvent) => void
• cursor: Cursor 타입의 마우스 커서 스타일

커서 타입

위젯 위에 마우스를 올렸을 때 커서를 설정하려면 cursor 속성을 사용하세요:

• “pointer”
• “default”
• “move”
• “text”
• “wait”
• “help”
• “progress”
• “not-allowed”
• “crosshair”
• “grab”
• “grabbing”
• 기타…

예시:

GestureDetector({
  cursor: "pointer",
  child: /* widget */
})

일반적인 사용 사례

대화형 버튼

GestureDetector({
  onClick: handleClick,
  child: CustomButton(),
});

드래그 가능한 항목

GestureDetector({
  onDragStart: handleDragStart,
  onDragMove: handleDragMove,
  onDragEnd: handleDragEnd,
  child: DraggableItem(),
});

마우스 상호작용

GestureDetector({
  onMouseEnter: handleMouseEnter,
  onMouseLeave: handleMouseLeave,
  child: HoverableWidget(),
});

모범 사례

상태 관리

• 상태 관리를 위해 StatefulWidget과 setState 사용
• 불필요한 재렌더링을 피하기 위해 상태 변경 최소화

이벤트 처리

• 다양한 상호작용에 적절한 이벤트 핸들러 사용
• 이벤트 버블링을 방지하기 위해 필요한 경우 event.stopPropagation() 사용

성능

• 이벤트 핸들러에서 무거운 계산 피하기
• 필요한 경우 성능 최적화를 위해 requestAnimationFrame 사용

팁과 요령

커스텀 커서

• 사용자에게 시각적 피드백을 제공하기 위해 cursor 속성 활용

이벤트 전파

• event.stopPropagation()과 event.preventDefault()를 사용하여 이벤트 버블링 제어

디버깅

• 이벤트 데이터를 검사하기 위해 이벤트 핸들러에서 console.log 사용