[flutter] getX 함수를 사용한 위젯의 드래그 가능한 구현

04 Dec 2023

flutter

Flutter에서 getX 패키지는 상태 관리를 쉽게 할 수 있는 State Management 패키지 중 하나입니다. getX를 사용하면 위젯의 상태를 간편하게 관리할 수 있으며, 복잡한 로직을 간결하게 작성할 수 있습니다. 이번 포스트에서는 getX 함수를 사용하여 드래그 가능한 위젯을 구현하는 방법을 알아보겠습니다.

1. getX 패키지 추가

먼저, 프로젝트에 getX 패키지를 추가해야 합니다. pubspec.yaml 파일의 dependencies 섹션에 아래와 같이 getX 패키지를 추가합니다.

dependencies:
  get: ^4.3.8

그리고 터미널에서 flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

2. 드래그 가능한 위젯 구현

이제 getX 함수를 사용하여 드래그 가능한 위젯을 구현해보겠습니다. 아래 코드는 getX를 사용하여 드래그 가능한 네모 상자를 만드는 예제입니다.

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

class DraggableBox extends StatelessWidget {
  final Rx<Offset> boxPosition = Rx(Offset.zero);

  @override
  Widget build(BuildContext context) {
    return GetBuilder<DraggableBoxController>(
      init: DraggableBoxController(),
      builder: (controller) {
        return GestureDetector(
          onPanUpdate: (details) {
            boxPosition.value += details.delta;
          },
          child: Positioned(
            left: boxPosition.value.dx,
            top: boxPosition.value.dy,
            child: Draggable(
              child: Container(
                width: 100,
                height: 100,
                color: Colors.blue,
              ),
              feedback: Container(
                width: 100,
                height: 100,
                color: Colors.blue.withOpacity(0.5),
              ),
              onDragEnd: (details) {
                controller.onDragEnd(details.offset);
              },
            ),
          ),
        );
      },
    );
  }
}

class DraggableBoxController extends GetxController {
  void onDragEnd(Offset offset) {
    // 드래그 종료 시 로직 작성
    print('드래그 종료: $offset');
  }
}

위 코드의 주요 부분은 다음과 같습니다.

GetX() 위젯: getX 패키지의 GetBuilder 위젯을 사용하여 상태 관리를 처리합니다. init 파라미터로 상태를 관리하는 컨트롤러를 전달합니다.
Obx() 위젯: getX 패키지의 Rx를 사용하여 상태 변수인 boxPosition을 감지하고, 해당 상태가 변경될 때마다 위젯을 다시 빌드합니다.
onPanUpdate 이벤트 핸들러: 손가락으로 위젯을 드래그하는 동안 호출되는 이벤트 핸들러입니다. details.delta 값을 사용하여 드래그한 거리를 계산하여 boxPosition 상태 변수를 변경합니다.
Draggable 위젯: 터치로 입력받은 항목을 임의의 위치로 드래그할 수 있는 위젯입니다. child는 블루 색상의 사각형을 나타내며, feedback는 드래그 중에 표시되는 투명한 사각형입니다. onDragEnd 이벤트 핸들러에서는 드래그가 종료됐을 때, 컨트롤러의 onDragEnd 메서드를 호출하고, 드래그한 위치인 details.offset을 전달합니다.

3. 사용 예제

이제 위에서 구현한 드래그 가능한 네모 상자를 사용하는 예제를 만들어보겠습니다. 다음과 같이 사용할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GetX Draggable Box'),
        ),
        body: Center(
          child: Stack(
            children: [
              DraggableBox(),
            ],
          ),
        ),
      ),
    );
  }
}

위 예제에서는 DraggableBox 위젯을 Stack 위젯의 자식으로 추가합니다. 따라서, 화면 중앙에 드래그 가능한 네모 상자가 표시됩니다.

이제 앱을 실행하고 상자를 드래그해보세요. 드래그한 위치가 콘솔에 출력되는 것을 확인할 수 있습니다.

마치며

이번 포스트에서는 getX 함수를 사용하여 드래그 가능한 위젯을 구현하는 방법을 알아보았습니다. getX는 간단한 코드로 복잡한 상태 관리를 처리할 수 있어 개발자들에게 많은 편의를 제공합니다. 추가적인 기능과 사용법에 대해서는 getX 공식 문서를 참고하시기 바랍니다.

참고 자료

GetX 공식 문서

</br>