[flutter] getX 함수를 사용하여 드래그 이벤트로 움직이는 위젯에 공기 저항 적용하기

04 Dec 2023

flutter

소개

Flutter에서 getX 함수는 간단한 드래그 이벤트를 처리하기 위해 사용되는 함수입니다. 이 함수를 사용하여 위젯이 드래그 이벤트에 반응하게 만들 수 있습니다. 이번 튜토리얼에서는 getX 함수를 사용하여 드래그로 움직이는 위젯에 공기 저항 효과를 추가해보겠습니다.

시작하기 전에

이 튜토리얼을 따라하기 위해서는 Flutter와 getX 패키지가 설치되어 있어야 합니다. Flutter 공식 홈페이지(https://flutter.dev)나 getX GitHub 저장소(https://github.com/jonataslaw/getx)에서 설치 방법을 확인할 수 있습니다.

공기 저항 효과 구현하기

먼저 getX 패키지를 프로젝트에 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  get:

드래그로 움직이는 위젯을 생성합니다.

class DraggableWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final controller = Get.put(DraggableController());

    return GestureDetector(
      onPanUpdate: (details) {
        controller.setPosition(details.delta.dx, details.delta.dy);
      },
      child: GetBuilder<DraggableController>(
        builder: (_) => Positioned(
          left: controller.x,
          top: controller.y,
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

위 코드에서는 DraggableWidget을 생성하고, GestureDetector를 사용하여 드래그 이벤트를 감지하고, GetBuilder를 사용하여 위치를 업데이트합니다. DraggableController의 x와 y 변수를 사용하여 위젯의 위치를 조정합니다.

DraggableController 클래스를 생성합니다.
```
class DraggableController extends GetxController {
  double x = 0.0;
  double y = 0.0;

  void setPosition(double dx, double dy) {
    x += dx;
    y += dy;
    update();
  }
}
```
위 코드에서는 getX의 GetxController를 상속받은 DraggableController를 생성하고, x와 y 변수를 사용하여 위치를 저장하고, setPosition 함수를 통해 위치를 업데이트합니다.

이제 DraggableWidget을 화면에 표시하기 위해 메인 화면을 수정합니다.

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Stack(
          children: [
            DraggableWidget(),
          ],
        ),
      ),
    ),
  ));
}

위 코드에서는 SafeArea와 Stack을 사용하여 DraggableWidget을 화면에 배치합니다.

앱을 실행하면 드래그로 움직이는 파란색 정사각형이 나타날 것입니다. 그러나 현재는 드래그에 아무런 공기 저항 효과가 없습니다.

이제 getX 패키지에서 제공하는 이니셜리즈함수를 사용하여 공기 저항 효과를 구현해보겠습니다. DraggableController의 setPosition 함수의 코드를 수정합니다.

void setPosition(double dx, double dy) {
  x = x.isNegative ? x + dx : x - dx;
  y = y.isNegative ? y + dy : y - dy;

  if (x > 0) {
    x = math.max(0, x - 1);
  } else if (x < 0) {
    x = math.min(0, x + 1);
  }

  if (y > 0) {
    y = math.max(0, y - 1);
  } else if (y < 0) {
    y = math.min(0, y + 1);
  }

  update();
}

위 코드에서는 x와 y가 양수일 경우 1을 뺄셈하고, 음수일 경우 1을 덧셈하여 공기 저항 효과를 구현합니다. math.max와 math.min 함수를 사용하여 위치가 0을 넘어가지 않도록 제한합니다.

앱을 다시 실행하면 드래그 이벤트로 움직이는 위젯에 공기 저항 효과가 적용된 것을 확인할 수 있습니다.

결론

이번 튜토리얼에서는 getX 함수를 사용하여 드래그 이벤트로 움직이는 위젯에 공기 저항 효과를 구현하는 방법을 알아보았습니다. getX 패키지를 사용하면 간단하게 드래그 이벤트를 처리하고 움직이는 위젯에 다양한 효과를 추가할 수 있습니다.