[flutter] 메뉴 버튼에 애니메이션 효과 적용하기

11 Dec 2023

flutter

플러터(Flutter) 애플리케이션에서 인터랙티브한 사용자 경험을 제공하기 위해 메뉴 버튼에 애니메이션 효과를 적용할 수 있습니다. 이를 통해 일반적인 버튼보다 더 매력적이고 사용자 친화적인 UI를 구현할 수 있습니다. 이번 포스트에서는 플러터를 사용해서 메뉴 버튼에 애니메이션 효과를 적용하는 방법에 대해 알아보겠습니다.

애니메이션을 위한 기본 구조 설정

먼저, 애니메이션을 적용하기 위해 플러터의 기본 구조를 설정해야 합니다. 이를 위해 StatefulWidget을 활용하여 애니메이션을 다룰 수 있습니다.

class MenuButtonAnimation extends StatefulWidget {
  @override
  _MenuButtonAnimationState createState() => _MenuButtonAnimationState();
}

class _MenuButtonAnimationState extends State<MenuButtonAnimation> {
  // 여기에 애니메이션 효과 관련 로직을 구현합니다.
}

애니메이션 구현하기

_MenuButtonAnimationState 클래스 안에서 애니메이션 관련 로직을 구현할 수 있습니다. 플러터에서는 AnimationController와 Tween을 활용하여 애니메이션을 만들 수 있습니다. 예를 들어, 아래와 같이 AnimationController와 Tween을 사용하여 회전 애니메이션을 구현할 수 있습니다.

AnimationController _controller;
Animation<double> _rotationAnimation;

@override
void initState() {
  _controller = AnimationController(
    duration: const Duration(milliseconds: 500),
    vsync: this,
  )..addListener(() {
    setState(() {
      // 애니메이션 상태에 따른 UI 업데이트 로직을 작성합니다.
    });
  });

  _rotationAnimation = Tween<double>(
    begin: 0,
    end: 0.5,
  ).animate(_controller);
  super.initState();
}

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

위 코드에서는 AnimationController를 생성하여 애니메이션의 시간과 vsync를 설정하고, Tween을 이용하여 애니메이션 변화에 따른 값을 정의합니다.

버튼과 애니메이션 연결하기

마지막으로, 위에서 생성한 애니메이션을 실제 버튼과 연결하여 해당 버튼을 누를 때 애니메이션이 실행되도록 설정할 수 있습니다.

FlatButton(
  onPressed: () {
    if (_controller.status == AnimationStatus.completed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  },
  child: Text('메뉴'),
),

위 코드에서는 FlatButton 위젯의 onPressed 이벤트 핸들러에서 애니메이션 코드를 실행시킵니다. 버튼을 누를 때마다 애니메이션이 실행되고, 더 나은 사용자 경험을 제공할 수 있습니다.

애니메이션 효과를 적용하여 보다 인터랙티브한 UI를 구현할 수 있습니다. 위에서 안내한 방법을 활용하여 메뉴 버튼 등의 요소에 애니메이션을 적용해 보세요.

참고 자료

플러터(Flutter) 애니메이션 공식 문서