[flutter] getX 함수를 사용하여 터치 이벤트에 따른 동작 처리하기

04 Dec 2023

flutter

앱 개발 중 터치 이벤트에 따른 동작을 처리해야 하는 경우가 종종 있습니다. Flutter에서는 getX 함수를 사용하여 터치 좌표를 가져와 다양한 동작을 처리할 수 있습니다. 이번 포스트에서는 getX 함수를 사용하여 터치 이벤트에 따른 동작을 처리하는 방법을 알아보겠습니다.

getX 함수란?

getX 함수는 Flutter의 Draggable 또는 GestureDetector와 함께 사용되는 함수로, 사용자의 터치 좌표를 가져올 수 있습니다. getX 함수는 화면의 좌상단을 기준으로 사용자의 터치 좌표를 가져오며, 수평 방향으로 움직인 거리를 반환합니다.

getX 함수 사용하기

다음은 getX 함수를 사용하여 터치 이벤트에 따른 동작을 처리하는 예시 코드입니다.

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("GetX Example"),
      ),
      body: GestureDetector(
        onHorizontalDragUpdate: (details) {
          double distance = details.delta.dx;
          if (distance < 0) {
            // 왼쪽으로 스와이프
            // TODO: 왼쪽으로 스와이프할 때 수행할 동작 작성
          } else if (distance > 0) {
            // 오른쪽으로 스와이프
            // TODO: 오른쪽으로 스와이프할 때 수행할 동작 작성
          }
        },
        child: Container(
          color: Colors.white,
          child: Center(
            child: Text(
              "Swipe here!",
              style: TextStyle(fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(GetMaterialApp(
    home: MyHomePage(),
  ));
}

위 코드에서는 GestureDetector를 사용하여 터치 이벤트를 감지하고 onHorizontalDragUpdate 콜백을 통해 터치 좌표를 받아옵니다. details.delta.dx를 사용하여 수평 방향으로 움직인 거리를 가져온 후, 거리에 따라 왼쪽 또는 오른쪽 스와이프를 처리하는 로직을 추가하면 됩니다.

참고 자료

GetX Documentation