[flutter] 사용자 입력에 반응하는 애니메이션 처리 방법

11 Dec 2023

flutter

Flutter 애플리케이션에서 사용자 입력에 반응하는 애니메이션을 처리하는 것은 매우 중요합니다. 사용자가 버튼을 탭하거나 화면을 스와이프할 때 매끄러운 애니메이션 효과를 제공하는 것이 사용자 경험을 향상시키는 데 도움이 됩니다. 이번 블로그 포스트에서는 Flutter에서 사용자 입력에 반응하는 애니메이션 처리 방법을 살펴보겠습니다.

GestureDetector 사용하기

Flutter에서 사용자 입력을 처리하기 위해 일반적으로 GestureDetector 위젯을 사용합니다. 이 위젯을 사용하면 탭, 드래그, 스와이프 등의 제스처를 처리할 수 있습니다.

예를 들어, 아래와 같이 GestureDetector 위젯을 사용하여 탭 제스처에 반응하는 기본 애니메이션을 추가할 수 있습니다.

GestureDetector(
  onTap: () {
    // 애니메이션 처리 코드 추가
  },
  child: Container(
    width: 200,
    height: 200,
    color: Colors.blue,
  ),
)

애니메이션 추가하기

사용자 입력에 반응하는 애니메이션을 추가하려면 AnimationController와 Animation을 사용하여 트윈 애니메이션을 정의해야 합니다.

예를 들어, 탭 제스처에 반응하여 컨테이너의 크기를 변경하는 애니메이션을 추가하려면 아래와 같이 코드를 작성할 수 있습니다.

class _MyWidgetState extends State<MyWidget> with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: Duration(seconds: 1),
      vsync: this,
    );

    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller)
      ..addListener(() {
        setState(() {
          // 애니메이션을 적용할 속성 값 업데이트
        });
      });

    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (_controller.status == AnimationStatus.completed) {
          _controller.reverse();
        } else {
          _controller.forward();
        }
      },
      child: Container(
        width: 200 * _animation.value,
        height: 200 * _animation.value,
        color: Colors.blue,
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

위 코드에서는 AnimationController를 사용하여 1초 동안 크기를 변경하는 애니메이션을 정의하고, GestureDetector를 통해 탭 제스처에 반응하는 방식으로 애니메이션을 제어합니다.

마무리

Flutter에서 사용자 입력에 반응하는 애니메이션을 처리하는 방법에 대해 간단히 살펴보았습니다. GestureDetector를 사용하여 사용자 입력을 처리하고, AnimationController와 Animation을 사용하여 애니메이션을 추가하는 방법을 알아보았습니다. 사용자와의 상호 작용이 필수적인 앱을 개발할 때 이러한 기술을 응용하여 사용자 경험을 향상시킬 수 있습니다.

참고 문헌: