[flutter] getX 함수를 사용하여 터치 이벤트 위치를 사용한 이미지 위치 변경하기

04 Dec 2023

flutter

이번 블로그에서는 Flutter 앱에서 getX 함수를 사용하여 이미지를 터치 이벤트의 위치에 따라 움직이는 방법을 알아보겠습니다.

getX 함수란?

getX 함수는 Flutter에서 제공하는 getX 라이브러리의 일부입니다. 이 함수를 사용하면 사용자의 터치 이벤트에 대한 위치 값을 쉽게 얻을 수 있습니다. getX 함수는 사용자의 터치 이벤트에 대한 x좌표를 반환합니다.

터치 이벤트 위치 가져오기

먼저, getX 함수를 사용하기 전에 GestureDetector 위젯을 사용하여 화면에 터치 이벤트를 감지하도록 설정해야 합니다. GestureDetector는 터치 이벤트를 인식할 수 있는 위젯입니다.

import 'package:flutter/material.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (TapDownDetails details) {
        // getX 함수를 사용하여 x좌표 값 가져오기
        double xPos = details.globalPosition.dx;
        print('터치 이벤트 위치 - x: $xPos');
      },
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue,
      ),
    );
  }
}

위의 코드에서 onTapDown 콜백 함수에서 getX 함수를 사용하여 x좌표 값을 가져오고, 이를 화면에 출력합니다.

이미지 위치 변경하기

이제 터치 이벤트의 위치에 따라 이미지가 움직이도록 코드를 수정해보겠습니다.

import 'package:flutter/material.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  double xPos = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        setState(() {
          xPos += details.delta.dx; // x좌표 값 업데이트
        });
      },
      child: Stack(
        children: [
          Positioned(
            top: 0,
            left: xPos,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

위의 코드에서는 onPanUpdate 콜백 함수를 사용하여 드래그 이벤트가 발생할 때마다 x좌표 값을 업데이트하고, 이를 통해 이미지의 위치를 변경합니다. xPos 변수를 사용하여 이미지의 left 속성을 조정하여 위치를 변경합니다.

이제 앱을 실행하고 이미지를 터치하여 드래그하면 이미지가 움직이는 것을 확인할 수 있습니다.

이번 블로그에서는 getX 함수를 사용하여 터치 이벤트 위치를 사용한 이미지 위치 변경 방법을 알아보았습니다. Flutter의 getX 함수와 GestureDetector를 통해 인터랙티브한 앱을 손쉽게 개발할 수 있습니다.

참고:

목차

getX 함수란?

터치 이벤트 위치 가져오기

이미지 위치 변경하기