[flutter] getX 함수를 사용하여 터치 이벤트 위치가 다른 위젯과의 충돌을 감지하기

04 Dec 2023

flutter

Flutter의 getX 함수는 터치 이벤트가 발생한 위치를 가져오는 함수입니다. 이를 활용하여 다른 위젯과의 충돌을 감지하는 방법을 알아보겠습니다.

1. getX 함수란?

getX 함수는 GestureDetector나 RawPointerEvent를 통해 터치 이벤트가 발생한 위치의 x 좌표를 반환하는 함수입니다. 이를 통해 터치 이벤트가 발생한 위치를 알 수 있습니다.

double getX(PointerEvent event) {
  if (event is PointerDownEvent ||
      event is PointerMoveEvent ||
      event is PointerUpEvent) {
    return event.position.dx;
  }

  return 0.0;
}

위 코드에서 getX 함수는 터치 이벤트가 PointerDownEvent, PointerMoveEvent, PointerUpEvent 중 하나일 경우 event의 position.dx 값을 반환합니다.

2. 터치 이벤트 위치와 다른 위젯의 영역 비교하기

다른 위젯과의 충돌을 감지하기 위해서는 터치 이벤트 위치와 다른 위젯들의 영역을 비교해야 합니다.

예를 들어, 다음과 같은 위젯 구조가 있다고 가정해봅시다.

Stack(
  children: [
    Container(
      width: 200,
      height: 200,
      color: Colors.red,
      child: GestureDetector(
        onTapDown: (TapDownDetails details) {
          double touchX = details.localPosition.dx;
          double touchY = details.localPosition.dy;

          if (touchX >= 100 && touchX <= 200 &&
              touchY >= 100 && touchY <= 200) {
            // 터치 이벤트 위치와 Container 위젯의 영역이 충돌함
            print("Container 위젯과 충돌함");
          }
        },
      ),
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
  ],
)

위의 코드에서는 Stack 위젯 안에 빨간색으로 채워진 큰 Container와 파란색으로 채워진 작은 Container가 있습니다.

GestureDetector의 onTapDown 콜백 함수에서 getX 함수를 사용하여 터치 이벤트의 위치를 가져옵니다. 그리고 터치 이벤트 위치와 큰 Container의 영역을 비교하여 충돌을 감지합니다.

3. 마무리

flutter의 getX 함수를 사용하여 터치 이벤트 위치가 다른 위젯과의 충돌을 감지하는 방법을 알아보았습니다. 이를 활용하면 원하는 기능을 구현하는 데 도움이 될 수 있습니다.

더 자세한 내용은 공식 문서를 참고하세요.