[flutter] 플러터 getX 함수를 사용하여 드래그 이벤트 처리하기

04 Dec 2023

flutter

플러터에서는 getX 함수를 사용하여 제스처 이벤트를 처리할 수 있습니다. getX 함수는 현재 포인터의 위치를 반환하므로 드래그 이벤트를 감지하고 처리하는 데 사용됩니다.

getX 함수란?

getX 함수는 Get 패키지에서 제공하는 함수로, 터치 이벤트에서 현재 포인터의 위치를 가져오는 데 사용됩니다. 이 함수는 RawGestureDetector 위젯의 콜백 메서드에서 호출됩니다.

드래그 이벤트 처리하기

우선, Get 패키지를 pubspec.yaml 파일에 추가해야 합니다. 아래와 같이 dependencies에 get 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.1.4

드래그 이벤트를 처리할 화면을 만듭니다. 예를 들어, DraggableScreen 위젯을 생성합니다.

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class DraggableScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Draggable Screen'),
      ),
      body: Center(
        child: GestureDetector(
          onLongPress: () {
            // 길게 누르는 제스처를 감지했을 때 실행할 코드 작성
          },
          onPanUpdate: (details) {
            double dx = details.delta.dx;
            double dy = details.delta.dy;
            double x = details.globalPosition.dx;
            double y = details.globalPosition.dy;

            // 드래그 이벤트를 처리하는 코드 작성
          },
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

위 코드의 onPanUpdate 콜백에서 getX 함수를 사용하여 드래그 이벤트를 처리합니다. getX 함수를 사용하려면 import 'package:get/get.dart';를 추가해야 합니다.

onPanUpdate: (details) {
  double x = details.localPosition.dx;
  double y = details.localPosition.dy;

  // getX 함수를 사용하여 드래그 이벤트 처리
  double offsetX = Get.width - x;
  double offsetY = Get.height - y;

  // offsetX와 offsetY 값을 활용하여 원하는 작업 수행

  print('x: $offsetX, y: $offsetY');
},

onPanUpdate 콜백은 사용자가 화면을 터치하고 드래그할 때마다 호출됩니다. getX 함수를 사용하여 현재 포인터의 위치를 가져온 후, 이를 활용하여 원하는 작업을 수행할 수 있습니다. 위 코드에서는 offsetX와 offsetY 값을 계산하여 출력하는 예시를 보여주었습니다.

이제 DraggableScreen 위젯을 어디에서든 사용할 수 있습니다. 예를 들어, MaterialApp의 home 속성에 DraggableScreen을 지정하여 앱의 홈 화면으로 설정할 수 있습니다.

결론

플러터의 getX 함수를 사용하면 드래그 이벤트를 쉽게 처리할 수 있습니다. 위에서 설명한 방법을 따라 코드를 작성하면 됩니다. 자세한 내용은 GetX 패키지 문서를 참조해주세요.