[flutter] getX 함수를 사용하여 위젯에서의 터치 이벤트 위치 값을 변경하기

04 Dec 2023

flutter

이번 글에서는 Flutter의 getX 함수를 이용하여 위젯에서의 터치 이벤트 위치 값을 변경하는 방법에 대해 알아보겠습니다. getX 함수는 Flutter의 flutter/gestures 라이브러리에서 제공되는 함수로, 터치 이벤트의 x좌표 값을 반환해줍니다.

getX 함수 사용하기

getX 함수를 사용하기 위해서는 GestureDetector 위젯을 이용해야 합니다. GestureDetector는 사용자의 터치 제스처를 감지하기 위한 위젯으로, onTap이나 onPan 등의 콜백을 사용할 수 있게 해줍니다.

아래는 GestureDetector를 사용하여 터치 이벤트의 x좌표 값을 출력하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (details) { // onTap 콜백
        double x = details.globalPosition.dx; // 터치 이벤트의 x좌표 값
        print('터치 이벤트의 x좌표 값: $x');
      },
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue,
      ),
    );
  }
}

위 코드에서는 GestureDetector 위젯을 사용하여 Container 위젯을 감싸고 있습니다. onTap 콜백에서는 터치 이벤트의 x좌표 값을 출력하는데, details.globalPosition.dx를 사용하여 x좌표 값을 얻어올 수 있습니다.

결과 확인하기

위 예제 코드를 실행해보면, Container 위젯을 터치할 때마다 콘솔에 터치 이벤트의 x좌표 값이 출력되는 것을 확인할 수 있습니다.

위젯에서의 터치 이벤트의 x좌표 값을 변경하고 싶다면, getX 함수를 사용하여 얻은 값을 원하는 대로 변형하고 적용하면 됩니다.

getX 함수 사용하기

결과 확인하기

참고 자료