[flutter] getX 함수를 사용하여 터치 이벤트에 따른 애니메이션 상호작용 구현하기

04 Dec 2023

flutter

안녕하세요! 이번에는 Flutter에서 getX 함수를 사용하여 터치 이벤트에 따른 애니메이션 상호작용을 구현하는 방법에 대해 알아보겠습니다.

getX 함수란?

getX 함수는 Flutter에서 제공하는 상태 관리 패키지인 GetX에서 제공하는 함수입니다. 이 함수를 사용하면 상태 관리와 라우팅, 의존성 주입 등 여러 기능을 간편하게 처리할 수 있습니다. 자세한 내용은 공식 문서를 참고하시기 바랍니다. GetX 공식 문서

애니메이션 상호작용 구현하기

GetX 패키지 import 하기

import 'package:get/get.dart';

상태 관리 클래스 생성하기

class AnimationController extends GetxController {
  // 애니메이션 효과를 위한 변수 선언
  var animationValue = 0.0.obs;

  // 터치 이벤트를 처리할 함수
  void handleTouch() {
    // 애니메이션 효과 적용
    animationValue.value += 1.0;
  }
}

GetX의 Controller 기능을 사용하기 위해 GetxController 클래스를 상속받은 AnimationController 클래스를 생성합니다.
애니메이션 효과를 위한 변수 animationValue를 GetX의 obs 함수로 감싸서 관찰 가능한 변수로 만들어 줍니다.
터치 이벤트를 처리하는 함수 handleTouch를 생성합니다. 이 함수에서는 animationValue 변수의 값을 변경하여 애니메이션 효과를 구현합니다.

UI 구현하기

class AnimationScreen extends StatelessWidget {
  AnimationController animationController = Get.put(AnimationController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animation Screen'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            animationController.handleTouch();
          },
          child: Obx(() => Text(
            'Value: ${animationController.animationValue.value.toStringAsFixed(1)}',
            style: TextStyle(fontSize: 24),
          )),
        ),
      ),
    );
  }
}

UI를 담당하는 AnimationScreen 클래스에서 AnimationController 클래스의 인스턴스를 생성하고, GetX의 put 함수를 이용해 상태 관리 객체를 바인딩합니다.
GestureDetector 위젯을 사용하여 터치 이벤트를 감지하고, 터치가 발생할 때 AnimationController의 handleTouch 함수를 호출하여 애니메이션을 처리합니다.
Obx 위젯을 이용하여 animationValue 변수의 값을 감지하여 UI를 업데이트합니다.

그리고 위와 같이 구현하면 터치 이벤트에 따라 animationValue 변수가 변경되어 UI가 업데이트되며, 터치할 때마다 애니메이션 효과가 발생합니다.

이번 포스트에서는 getX 함수를 사용하여 터치 이벤트에 따른 애니메이션 상호작용을 구현하는 방법에 대해 알아보았습니다. getX 함수는 Flutter 앱에서 상태 관리와 관련된 기능을 효율적으로 처리할 수 있게 도와주는 강력한 패키지입니다. GetX의 다양한 기능과 활용 방법에 대해서는 공식 문서를 참고해보세요.

참고: GetX 공식 문서