[flutter] 플러터 Drawer에서 애니메이션 효과를 지정하는 방법은?

07 Dec 2023

flutter

기본 애니메이션 사용하기: 플러터 Drawer는 기본적으로 슬라이딩 애니메이션을 제공합니다. 따라서 따로 설정하지 않아도 Drawer를 열고 닫을 때 애니메이션이 적용됩니다. 이는 안드로이드의 Material Design 가이드라인에 따라 기본적으로 적용되는 애니메이션입니다.
사용자 정의 애니메이션 적용하기: 만약 사용자 정의 애니메이션을 적용하고 싶다면, 애니메이션을 직접 구현해야 합니다. 이를 위해서는 AnimationController, CurvedAnimation, SlideTransition 등의 클래스를 사용할 수 있습니다. 예를 들어, 아래와 같은 코드로 Drawer를 아래로 슬라이딩하는 사용자 정의 애니메이션을 만들어볼 수 있습니다.

class CustomDrawerAnimation extends StatefulWidget {
  @override
  _CustomDrawerAnimationState createState() => _CustomDrawerAnimationState();
}

class _CustomDrawerAnimationState extends State<CustomDrawerAnimation>
    with SingleTickerProviderStateMixin {
  AnimationController _animationController;
  Animation<Offset> _animation;

  @override
  void initState() {
    super.initState();

    _animationController =
        AnimationController(duration: Duration(milliseconds: 500), vsync: this);
    _animation =
        Tween<Offset>(begin: Offset(-1, 0), end: Offset(0, 0)).animate(
            CurvedAnimation(
                parent: _animationController, curve: Curves.easeOut));

    // Drawer를 열기 위한 액션 처리
    _openDrawer();
  }

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

  void _openDrawer() {
    _animationController.forward();
  }

  void _closeDrawer() {
    _animationController.reverse();
  }

  @override
  Widget build(BuildContext context) {
    return SlideTransition(
      position: _animation,
      child: Drawer(
        // Drawer 내용
      ),
    );
  }
}

위의 코드는 CustomDrawerAnimation 클래스를 생성하여 Drawer의 열기/닫기 액션에 따라 슬라이딩 애니메이션을 제공합니다. SlideTransition 위젯은 position 속성에 애니메이션을 적용하여 Drawer의 슬라이딩 효과를 구현합니다.

이와 같이 사용자 정의 애니메이션을 적용하면 플러터 Drawer에서 다양한 애니메이션 효과를 구현할 수 있습니다. Customize your Drawer with animation and make your app more dynamic and user-friendly!

참고 자료: