[flutter] getX 함수를 사용하여 드래그 이벤트에 따른 위젯 이동하기

04 Dec 2023

flutter

드래그 이벤트에 따라 위젯을 움직이고 싶은 경우, Flutter에서 getX 함수를 활용할 수 있습니다. getX 함수는 현재 터치 이벤트의 x 좌표를 반환하며, 이를 이용하여 원하는 동작을 구현할 수 있습니다.

getX 함수 설명

getX 함수는 GestureDetector 위젯의 onPanUpdate 콜백 함수 내에 사용될 수 있습니다. 아래는 getX 함수의 문법과 파라미터의 설명입니다.

double getX(DragUpdateDetails details)

DragUpdateDetails details: 드래그 이벤트에 대한 상세 정보를 포함하는 객체입니다. 이 객체는 이벤트의 위치, 속도 등을 포함하고 있습니다.

예제 코드

import 'package:flutter/material.dart';

class DraggableWidget extends StatefulWidget {
  @override
  _DraggableWidgetState createState() => _DraggableWidgetState();
}

class _DraggableWidgetState extends State<DraggableWidget> {
  double xOffset = 0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        setState(() {
          xOffset += details.delta.dx;
        });
      },
      child: Transform.translate(
        offset: Offset(xOffset, 0),
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
          child: Center(
            child: Text(
              'Drag Me',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Draggable Widget Example'),
      ),
      body: Center(
        child: DraggableWidget(),
      ),
    ),
  ));
}

위 예제 코드는 GestureDetector와 getX 함수를 사용하여 드래그 이벤트에 따라 위젯을 좌우로 이동시키는 기능을 구현한 것입니다.

DraggableWidget: GestureDetector를 사용하여 드래그 이벤트를 감지하고, getX 함수를 통해 x 좌표 값을 얻어와 xOffset 변수를 갱신합니다.
xOffset 변수를 이용하여 Transform.translate 위젯을 통해 Container 위젯을 좌우로 이동시킵니다.

결론

GetX 함수를 사용하여 드래그 이벤트에 따라 위젯을 이동시킬 수 있습니다. getX 함수는 GestureDetector의 onPanUpdate 콜백 함수 내에서 사용되며, 현재 터치 이벤트의 x 좌표를 반환합니다. getX 함수를 활용하여 사용자 인터랙션에 따라 동적인 위젯 이동을 구현할 수 있습니다.