[flutter] getX 함수를 사용하여 터치 이벤트에 따른 위젯 회전하기

Flutter는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크로, 다양한 기능과 위젯을 제공합니다. Flutter의 getX 함수는 터치 이벤트를 감지하고 해당 위치를 반환하는 함수입니다. 이 함수를 사용하여 터치 이벤트에 따라 위젯을 회전시킬 수 있습니다.

getX 함수란?

getX 함수는 Get 패키지에서 제공하는 함수로, 해당 위치에서 사용자의 터치 이벤트를 감지합니다. getX 함수는 손가락을 스와이프, 드래그하거나 클릭하는 등의 동작을 감지할 수 있습니다. getX 함수는 x라는 이름으로 현재 위치의 x 좌표를 반환합니다.

위젯 회전하기

이제 getX 함수를 사용하여 터치 이벤트에 따라 위젯을 회전시켜 보겠습니다.

  1. 먼저, GetX 패키지를 프로젝트에 추가합니다. pubspec.yaml 파일을 열고, 아래와 같이 get 패키지를 추가합니다.

    dependencies:
      flutter:
        sdk: flutter
      get: ^4.1.4 # getX 함수를 사용하기 위해 get 패키지 추가
    
  2. 다음으로, main.dart 파일을 열고, 다음과 같이 코드를 추가합니다.

    import 'package:flutter/material.dart';
    import 'package:get/get.dart';
    
    class RotatingWidget extends StatelessWidget {
    
      @override
      Widget build(BuildContext context) {
        return GetBuilder<RotatingController>(
          init: RotatingController(),
          builder: (controller) {
            return AnimatedBuilder(
              animation: controller.animationController,
              builder: (context, child) {
                return Transform.rotate(
                  angle: controller.angle,
                  child: GestureDetector(
                    onPanUpdate: (details) {
                      controller.rotateWidget(details.delta.dx);
                    },
                    child: Container(
                      width: 200,
                      height: 200,
                      color: Colors.blue,
                    ),
                  ),
                );
              },
            );
          },
        );
      }
    }
    
    class RotatingController extends GetxController {
      AnimationController animationController;
    
      double angle = 0.0;
    
      @override
      void onInit() {
        super.onInit();
        animationController = AnimationController(
          vsync: this,
          duration: Duration(milliseconds: 400),
        );
      }
    
      void rotateWidget(double delta) {
        angle += delta / 100;
        animationController.value = angle;
      }
    
      @override
      void dispose() {
        animationController.dispose();
        super.dispose();
      }
    }
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return GetMaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('GetX Widget Rotation'),
            ),
            body: Center(
              child: RotatingWidget(),
            ),
          ),
        );
      }
    }
    

    위 코드는 회전 가능한 위젯(RotatingWidget)과 그를 제어하는 컨트롤러(RotatingController)를 정의합니다. RotatingWidgetGetX 패키지의 GetBuilder 위젯으로 감싸져 있으며, RotatingController에서 제어되는 애니메이션과 터치 이벤트를 처리합니다.

  3. 앱을 실행하고 위젯을 터치하고 드래그하면, 위젯이 회전할 것입니다.

이제 getX 함수를 사용하여 터치 이벤트에 따라 위젯을 회전시킬 수 있습니다. Flutter와 GetX를 사용하여 상호작용하는 앱을 만들 때 유용하게 활용할 수 있습니다.