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

04 Dec 2023

flutter

이 포스트에서는 Flutter 앱에서 터치 이벤트를 사용하여 위젯의 로테이션을 처리하는 방법을 알아보겠습니다. 이를 위해 getX 함수를 사용할 것입니다.

getX 함수란?

getX 함수는 Flutter의 GetX 패키지에서 제공되는 함수로, 터치 이벤트를 감지하는데 사용됩니다. getX 함수는 다양한 터치 이벤트를 지원하며, 터치의 좌표를 제공하여 해당 좌표에서 어떤 작업을 수행할 수 있습니다.

필요한 패키지 가져오기

먼저, 필요한 패키지를 가져와야 합니다. GetX 패키지를 사용하기 위해 get 패키지를 사용합니다. 이를 위해 프로젝트의 pubspec.yaml 파일에 다음과 같이 의존성을 추가해주세요:

dependencies:
  get: ^4.3.8

의존성을 추가한 뒤, 패키지를 가져오기 위해 터미널에서 flutter pub get 명령을 실행해주세요.

위젯 로테이션 처리하기

이제 위젯의 로테이션을 처리하는 코드를 작성해보겠습니다.

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

class RotationWidget extends StatefulWidget {
  @override
  _RotationWidgetState createState() => _RotationWidgetState();
}

class _RotationWidgetState extends State<RotationWidget> {
  double rotationAngle = 0.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (details) {
        setState(() {
          // 터치된 좌표와 이전 좌표를 사용하여 각도 계산
          double dx = details.globalPosition.dx;
          double dy = details.globalPosition.dy;

          double previousDx = details.previousGlobalPosition.dx;
          double previousDy = details.previousGlobalPosition.dy;

          double angle = (dx - previousDx) / 100; // 회전 각도 계산 (조정 가능)

          rotationAngle += angle; // 현재 각도에 회전 각도 더하기
        });
      },
      child: Transform.rotate(
        angle: rotationAngle,
        child: Container(
          width: 200,
          height: 200,
          color: Colors.blue,
        ),
      ),
    );
  }
}

위의 코드는 StatefulWidget을 상속받는 RotationWidget 클래스를 정의하고, 해당 위젯의 빌드 메서드에서 GestureDetector와 Transform.rotate를 사용하여 로테이션을 처리합니다.

GestureDetector의 onPanUpdate 콜백 함수에서 getX 함수를 사용하여 터치 이벤트를 감지하고, 그에 따라 로테이션 각도를 계산하고 업데이트합니다. 이러한 변경 사항은 setState 함수를 호출하여 화면을 다시 그리도록 알립니다.

Transform.rotate 위젯은 rotationAngle 변수로 지정된 각도에 따라 자식 위젯을 회전시킵니다. 이 경우, Container 위젯을 회전시켰습니다.

사용하기

이제 위젯을 사용해보겠습니다. 예를 들어, MyApp 위젯을 정의하고 RotationWidget을 사용하는 방법은 다음과 같습니다:

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('Rotation Widget Example')),
        body: RotationWidget(),
      ),
    );
  }
}

결론

이렇게 Flutter에서 getX 함수를 사용하여 터치 이벤트에 따른 위젯 로테이션을 처리할 수 있습니다. getX 함수는 매우 강력한 도구이며, 다양한 터치 이벤트 처리에 유용하게 사용될 수 있습니다. GetX 패키지의 공식 문서를 참조하여 더 자세한 기능을 확인해보시기 바랍니다.

참고 자료

GetX 공식 문서