[flutter] getX 함수를 사용하여 스크롤뷰에서의 터치 이벤트 처리하기

04 Dec 2023

flutter

Flutter는 Google에서 개발한 크로스 플랫폼 앱 개발 프레임워크로, 풍부한 UI를 빠르게 구축할 수 있습니다. 이번 포스트에서는 Flutter의 getX 함수를 사용하여 스크롤뷰에서의 터치 이벤트를 처리하는 방법에 대해 알아보겠습니다.

getX 함수 소개

getX 함수는 Flutter의 GetX 패키지에서 제공하는 함수입니다. 이 함수는 스크롤뷰나 리스트뷰와 같은 위젯에서 터치 이벤트를 처리하기 위해 사용됩니다. getX 함수는 터치된 지점의 x 좌표를 반환해주는데, 이를 활용하여 다양한 기능을 구현할 수 있습니다.

스크롤뷰에서의 터치 이벤트 처리하기

먼저, getX 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다.
```
dependencies:
  get: ^4.1.4
```
getX 패키지를 import 합니다.
```
import 'package:get/get.dart';
```

스크롤뷰를 생성하고, 해당 스크롤뷰 위젯을 GestureDetector로 감싸줍니다.

SingleChildScrollView(
  child: GestureDetector(
    onHorizontalDragUpdate: (DragUpdateDetails details) {
      double dragDistance = details.delta.dx;
      // getX 함수를 사용하여 터치된 x 좌표 가져오기
      double touchX = getX(context).value;
      // 터치된 x 좌표와 드래그 거리를 활용하여 원하는 동작 수행
      // 예를 들어, 좌측 드래그인 경우 왼쪽으로 스크롤 이동
      // 우측 드래그인 경우 오른쪽으로 스크롤 이동 등
      // 이 부분에서 원하는 동작을 구현해주세요.
    },
    child: // 스크롤뷰 내용을 작성해주세요.
  ),
),

onHorizontalDragUpdate 콜백 함수에서는 DragUpdateDetails를 통해 드래그한 거리를 얻을 수 있습니다. getX 함수를 사용하여 터치된 x 좌표를 가져올 수 있고, 이를 활용하여 원하는 동작을 수행할 수 있습니다. 위 예시에서는 터치된 x 좌표와 드래그 거리를 비교하여 좌측 드래그인 경우 왼쪽으로 스크롤 이동하도록 작성하였습니다.
필요한 경우 getY 함수를 사용하여 y 좌표도 가져올 수 있습니다. 마지막으로, 원하는 동작을 구현하는 부분에 실제로 동작할 코드를 작성해주면 됩니다.

마무리

GetX 패키지의 getX 함수를 사용하면 Flutter 앱에서 스크롤뷰에서의 터치 이벤트를 손쉽게 처리할 수 있습니다. getX 함수를 사용하여 터치된 좌표를 가져와 원하는 동작을 구현하고, 좀 더 사용자 친화적인 앱을 개발해보세요.

참고 링크:

GetX 패키지