[flutter] getX 함수를 사용하여 터치 이벤트에 따른 위젯 로테이션 처리하기

04 Dec 2023

flutter

이번 블로그 포스트에서는 Flutter 앱에서 getX 함수를 사용하여 터치 이벤트에 따라 위젯을 로테이션하는 방법을 알아보겠습니다. getX 함수는 Flutter GetX 패키지의 일부입니다. 이 함수는 터치 이벤트를 감지하고 X, Y 좌표를 제공하여 사용자 정의 로직을 실행하는 데 사용됩니다.

우선, getX 패키지를 프로젝트에 추가해야 합니다. pubspec.yaml 파일을 열고 dependencies 섹션에 getX를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.1.4

그리고 프로젝트를 업데이트하기 위해 터미널에서 flutter pub get 명령을 실행하세요.

이제 로테이션을 적용할 위젯을 만들어보겠습니다. 다음과 같이 코드를 작성하세요.

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

class RotationWidget extends StatelessWidget {
  final controller = Get.put(RotationController());

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        if (details.delta.dx > 0) {
          controller.rotateRight();
        } else if (details.delta.dx < 0) {
          controller.rotateLeft();
        }
      },
      child: GetBuilder<RotationController>(
        builder: (_) {
          return Transform.rotate(
            angle: _.rotationValue,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  'Rotation',
                  style: TextStyle(fontSize: 24, color: Colors.white),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

class RotationController extends GetxController {
  var rotationValue = 0.0;

  void rotateRight() {
    rotationValue += 0.1;
    update();
  }

  void rotateLeft() {
    rotationValue -= 0.1;
    update();
  }
}

위 코드에서는 RotationWidget이라는 위젯을 정의하고, getX를 사용하여 터치 이벤트를 감지하고 로테이션을 처리합니다. GestureDetector 위젯을 사용하여 터치 이벤트를 감지하고, onPanUpdate 콜백을 사용하여 로직을 실행합니다. 로직은 getX의 RotationController를 통해 로테이션 값을 업데이트하고, GetBuilder를 사용하여 값의 변경을 감지하여 위젯을 다시 렌더링합니다.

이제 앱에서 RotationWidget을 사용하여 로테이션을 적용할 수 있습니다. 예를 들어, Scaffold 위젯의 body 속성에 RotationWidget을 넣어서 사용할 수 있습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Rotation App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Rotation App'),
        ),
        body: RotationWidget(),
      ),
    );
  }
}

이제 앱을 실행하면, 위젯을 드래그하여 터치 이벤트에 따라 로테이션을 적용할 수 있습니다.

이렇게 getX 함수를 사용하여 터치 이벤트에 따른 위젯 로테이션을 처리할 수 있습니다. getX 패키지는 다양한 상태 관리 기능을 제공하므로, 앱의 다른 부분에도 유용하게 사용할 수 있습니다.

추가로 공식 문서 GetX를 참고하여 더 많은 기능을 확인해보세요.