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

04 Dec 2023

flutter

Flutter에서는 getX 함수를 사용하여 터치 이벤트에 따른 수평 이동 처리를 간단하게 구현할 수 있습니다. getX 함수는 Flutter의 flutter_gestures 패키지에 포함되어 있으며, 사용자가 화면을 터치하고 이동할 때, 이동한 거리를 반환합니다.

getX 함수의 사용법

getX 함수는 DragUpdateDetails 객체를 매개변수로 받아 x축으로 이동한 거리를 반환합니다. 다음은 getX 함수를 사용하여 수평 이동 처리를 구현하는 예제 코드입니다.

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

class HorizontalMoveWidget extends StatefulWidget {
  @override
  _HorizontalMoveWidgetState createState() => _HorizontalMoveWidgetState();
}

class _HorizontalMoveWidgetState extends State<HorizontalMoveWidget> {
  double _currentX = 0.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onHorizontalDragUpdate: (DragUpdateDetails details) {
        setState(() {
          _currentX += details.delta.dx;
        });
      },
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue,
        child: Center(
          child: Text(
            'x: ${_currentX.toStringAsFixed(2)}',
            style: TextStyle(fontSize: 24, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

위 코드는 GestureDetecor 위젯을 사용하여 수평 이동을 감지하고, _currentX 변수를 업데이트함으로써 수평 이동 거리를 표시합니다. 이 예제에서는 블루 컬러의 네모 박스를 생성하고, 중앙에 현재 x 좌표를 표시하는 텍스트를 추가하였습니다.

결론

getX 함수를 사용하여 터치 이벤트에 따른 수평 이동 처리를 간편하게 구현할 수 있습니다. Flutter의 제스처 기능은 사용자의 터치 및 이동 동작을 감지하는데 매우 유용하며, getX 함수를 이용하여 수평 이동을 처리하는 예제를 통해 Flutter 앱을 더욱 다양하게 개발할 수 있습니다.