Flutter에서 getX 함수는 State Management 라이브러리인 GetX 패키지의 핵심 함수 중 하나입니다. getX 함수를 사용하면 간단하게 상태를 관리하고, 이벤트를 처리하는 동시에 다른 위젯과 결합할 수 있습니다. 이번 포스트에서는 getX 함수를 사용하여 드래그 이벤트를 다른 위젯과 결합하여 처리하는 방법에 대해 알아보겠습니다.

필요한 패키지 가져오기

먼저, getX 함수를 사용하기 위해 GetX 패키지를 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  flutter:
    sdk: flutter
  get: ^4.3.8 # 최신 버전 확인 후 사용

의존성을 추가한 후, 패키지를 가져오기 위해 터미널에서 다음 명령을 실행합니다:

flutter pub get

드래그 이벤트 처리하기

드래그 이벤트를 처리하기 위해서는 GetXController를 사용하여 상태를 관리해야 합니다. 아래의 예제 코드에서는 샘플로 GetXController를 상속받는 DragController 클래스를 생성하겠습니다:

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

class DragController extends GetxController {
  Rx<Offset> position = Offset.zero.obs;

  void updatePosition(DragUpdateDetails details) {
    position.value += details.delta;
  }
}

위 코드에서는 position 변수를 Rx<Offset> 타입으로 선언하여 상태를 관리하고 있습니다. 이 변수는 드래그 이벤트에 따라 변경되는 값으로 사용될 것입니다.

이제 드래그 이벤트를 처리할 위젯을 생성하고, GetX 위젯을 사용하여 DragController를 연결하겠습니다:

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

class DragWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final DragController dragController = Get.put(DragController());

    return GetX<DragController>(
      builder: (controller) {
        return Positioned(
          left: controller.position.value.dx,
          top: controller.position.value.dy,
          child: GestureDetector(
            onPanUpdate: controller.updatePosition,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
        );
      },
    );
  }
}

위 코드에서는 Get.put(DragController())를 사용하여 DragController를 생성하고 설정한 후, GetX<DragController> 위젯을 사용하여 DragController에 접근합니다. GetX 위젯의 builder 함수에서는 DragController의 position 값을 사용하여 위젯의 위치를 업데이트합니다. 또한 onPanUpdate 콜백을 통해 드래그 이벤트를 DragController의 updatePosition 함수로 전달합니다.

위젯 트리에 추가하기

마지막으로, 위에서 생성한 DragWidget을 적절한 위치에 추가해야 합니다. 예를 들어, 다른 위젯이나 Stack 위젯 안에 포함시킬 수 있습니다:

Stack(
  children: [
    // 다른 위젯들
    DragWidget(),
  ],
)

이렇게 하면 DragWidget이 화면에 표시되며, 사용자가 위젯을 드래그할 때 DragController에 의해 위치가 업데이트됩니다.

결론

GetX의 getX 함수를 사용하면 상태 관리와 이벤트 처리를 손쉽게 할 수 있습니다. 이 예제에서는 드래그 이벤트를 처리하고 다른 위젯과 결합시키는 방법을 살펴보았습니다. getX 함수를 사용하면 코드의 가독성과 재사용성을 높일 수 있으며, 효율적인 상태 관리를 구현할 수 있습니다.

참고 자료

• GetX documentation

</br>