[flutter] getX 함수를 사용하여 터치 이벤트에 따른 3D 화면 회전하기

04 Dec 2023

flutter

Flutter는 Google에서 개발된 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크입니다. 이번에는 Flutter의 상태 관리 라이브러리인 getX를 사용하여 터치 이벤트에 따라 3D 화면을 회전시켜보겠습니다.

getX 라이브러리 설치하기

getX를 사용하기 위해 먼저 pubspec.yaml 파일에 getX 라이브러리를 추가해야 합니다. 다음과 같이 dependencies 부분에 getX를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  get: ^4.1.3  # getX 라이브러리 추가

설치가 완료되면 pubspec.yaml 파일을 저장하고, Flutter 프로젝트를 업데이트 해주세요. 이후 getX를 사용할 준비가 끝났습니다.

3D 화면 회전 구현하기

먼저, main.dart 파일을 열고 다음과 같은 코드를 추가해주세요.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('3D 화면 회전'),
        ),
        body: Center(
          child: Transform.rotate(
            angle: GetXController.to.rotation.value,
            child: Container(
              width: 200,
              height: 200,
              color: Colors.blue,
              child: Center(
                child: Text(
                  '회전',
                  style: TextStyle(
                    fontSize: 24,
                    color: Colors.white,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class GetXController extends GetxController {
  var rotation = 0.0.obs;

  void rotateScreen(double dx) {
    rotation.value = dx;
  }
}

위의 코드에서 GetXController 클래스를 생성하여 rotation 변수를 사용합니다. GetXController.to.rotation.value 는 GetX에서 제공하는 상태 관리 방법을 사용하여 rotation 값을 가져옵니다. rotateScreen 함수를 통해 rotation 값을 변경하고, 해당 값을 Transform.rotate 위젯의 angle 속성에 전달합니다.

이제 터치 이벤트를 감지하여 3D 화면을 회전시키는 기능을 구현해보겠습니다. main.dart 파일의 body 부분을 다음과 같이 수정해주세요.

body: GestureDetector(
  onPanUpdate: (details) {
    Get.find<GetXController>().rotateScreen(details.delta.dx);
  },
  child: Center(
    child: Transform.rotate(
      angle: GetXController.to.rotation.value,
      child: Container(
        width: 200,
        height: 200,
        color: Colors.blue,
        child: Center(
          child: Text(
            '회전',
            style: TextStyle(
              fontSize: 24,
              color: Colors.white,
            ),
          ),
        ),
      ),
    ),
  ),
),

위의 코드에서 GestureDetector 위젯을 사용하여 onPanUpdate 콜백 함수를 등록합니다. 이 함수는 사용자의 터치 이벤트가 발생할 때 호출됩니다. details.delta.dx를 rotateScreen 함수에 전달하여 X축 방향의 이동값을 얻고, 화면 회전을 수행합니다.

이제 Flutter 앱을 실행하고 화면을 터치하여 3D 화면이 회전되는지 확인해보세요. 성공적으로 구현되었다면, getX를 사용하여 터치 이벤트에 따라 3D 화면을 회전시킬 수 있게 되었습니다.

마무리

이번 예제에서는 Flutter와 getX를 사용하여 터치 이벤트에 따라 3D 화면을 회전시키는 방법을 알아보았습니다. getX를 활용하면 간편하게 상태 관리를 할 수 있으며, 터치 이벤트와 같은 사용자 입력을 반영하는 기능을 더욱 쉽게 구현할 수 있습니다.

추가적인 자세한 내용과 getX에 대한 기능들을 알아보려면 getX 공식 문서를 참고하시기 바랍니다.