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

07 Dec 2023

flutter

플러터(Flutter)는 다양한 UI 요소를 제공하여 애플리케이션 개발을 쉽게 할 수 있게 도와줍니다. 플러터의 Drawer는 네비게이션 메뉴를 표시하는 데 사용되는 중요한 요소 중 하나입니다. 이 Drawer에서 애니메이션 효과를 적용하여 더욱 동적인 사용자 경험을 제공할 수 있습니다. 이제 Drawer에서 애니메이션 효과를 적용하는 방법에 대해 알아보겠습니다.

1. Drawer 애니메이션 효과 라이브러리 추가하기

플러터에서는 여러 가지 Drawer 애니메이션 효과를 적용할 수 있는 라이브러리를 제공합니다. 그 중에서도 flutter_animation_set이라는 라이브러리를 사용하여 단순하면서도 간편하게 Drawer에 애니메이션 효과를 적용할 수 있습니다.

먼저 flutter_animation_set을 프로젝트에 추가하기 위해 pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  flutter_animation_set: ^1.2.0

위와 같이 의존성을 추가한 후에는 flutter_animation_set의 최신 버전을 적용하기 위해 터미널에서 flutter pub get 명령을 실행하여 의존성을 설치합니다.

2. Drawer에 애니메이션 효과 적용하기

이제 flutter_animation_set을 사용하여 Drawer에 애니메이션 효과를 적용해보겠습니다. 먼저 controller를 정의하여 애니메이션 제어를 위해 필요한 메소드와 변수를 설정합니다.

AnimationController _animationController;
Animation<double> _animation;
bool _isExpanded = false;

그리고 이 controller를 초기화하여 사용할 준비를 합니다:

@override
void initState() {
  _animationController = AnimationController(
    duration: Duration(milliseconds: 300),
    vsync: this,
  );

  _animation = CurvedAnimation(
    parent: _animationController,
    curve: Curves.easeInOut,
  );

  super.initState();
}

이제 Drawer의 상태에 따라 애니메이션 효과를 제어하기 위한 메소드를 작성합니다. 예를 들어, Drawer가 열려있을 때와 닫혀있을 때의 애니메이션 효과를 다르게 적용할 수 있습니다.

void _toggleAnimation() {
  setState(() {
    _isExpanded = !_isExpanded;

    if (_isExpanded) {
      // 애니메이션 효과 적용 시간과 방향 설정
      _animationController.forward();
    } else {
      _animationController.reverse();
    }
  });
}

마지막으로, Drawer 위젯에 애니메이션 효과를 적용하여 사용자 상호작용에 따라 애니메이션을 수행하도록 지정합니다:

Drawer(
  child: AnimatedBuilder(
    animation: _animationController,
    builder: (context, child) {
      return Transform.scale(
        scale: _animation.value,
        child: child,
      );
    },
    child: ListView(
      // 메뉴 아이템들
    ),
  ),
)

위의 코드에서는 Drawer 위젯을 AnimatedBuilder로 감싸고, 애니메이션 적용에 사용할 Transform.scale을 이용하여 애니메이션 효과를 적용하고 있습니다.

이제 Drawer에서 애니메이션 효과를 적용하는 방법에 대해 알아보았습니다. flutter_animation_set을 사용하여 Drawer에 다양한 애니메이션 효과를 적용할 수 있으며, 이를 통해 사용자에게 더욱 동적이고 흥미로운 경험을 제공할 수 있습니다.

1. Drawer 애니메이션 효과 라이브러리 추가하기

2. Drawer에 애니메이션 효과 적용하기

참고 자료