[flutter] getX 함수를 사용하여 화면 전체에서의 터치 좌표 가져오기

04 Dec 2023

flutter

Flutter에서 화면 전체에서 터치 좌표를 가져오는 방법은 간단합니다. getX 함수를 사용하여 현재 터치 이벤트의 X 좌표를 가져올 수 있습니다.

getX 함수 사용 방법

getX 함수는 GestureDetector 클래스의 onHorizontalDragUpdate 콜백에서 사용됩니다. 아래는 getX 함수를 사용하여 화면 전체에서 터치 이벤트의 X 좌표를 가져오는 예제 코드입니다.

import 'package:flutter/material.dart';

class TouchCoordinates extends StatefulWidget {
  @override
  _TouchCoordinatesState createState() => _TouchCoordinatesState();
}

class _TouchCoordinatesState extends State<TouchCoordinates> {
  double _xCoordinate = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('터치 좌표 가져오기'),
      ),
      body: GestureDetector(
        onHorizontalDragUpdate: (DragUpdateDetails details) {
          setState(() {
            _xCoordinate = details.globalPosition.dx;
          });
        },
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                '터치한 X 좌표:',
                style: TextStyle(fontSize: 18),
              ),
              Text(
                _xCoordinate.toString(),
                style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: TouchCoordinates()));
}

코드 설명

TouchCoordinates 위젯은 StatefulWidget을 상속받아 상태 관리가 가능하도록 구현됩니다.
_xCoordinate 변수는 현재 터치한 X 좌표를 저장하는 변수입니다.
GestureDetector 위젯으로 감싸진 body 부분에서 onHorizontalDragUpdate 콜백을 사용하여 터치 이벤트를 감지합니다.
onHorizontalDragUpdate 콜백은 사용자가 화면에서 좌우로 드래그할 때 마다 호출됩니다.
getX 함수를 사용하여 터치 이벤트의 X 좌표를 _xCoordinate 변수에 저장합니다.
setState 메소드를 호출하여 _xCoordinate 값을 변경하여 화면을 다시 그립니다.
화면에는 현재 터치한 X 좌표가 표시됩니다.

이 예제 코드를 실행해보면, 화면 전체에서 터치 이벤트의 X 좌표를 실시간으로 확인할 수 있습니다.

더 자세한 내용은 Flutter 문서를 참조하세요.