[flutter] 플러터 애니메이션을 통한 화면 전환의 부드러움 구현 방법

11 Dec 2023

flutter

안녕하세요! 이번에는 플러터(Flutter) 앱에서 화면 전환의 부드러움을 구현하는 방법에 대해 알아보겠습니다. 플러터는 강력한 애니메이션 기능을 제공하여, 사용자 경험을 향상시키는데 매우 유용합니다.

1. Hero 애니메이션 활용

Hero 애니메이션은 이미지나 위젯 등의 컨텐츠가 화면 전환 시 자연스럽게 변형되는 애니메이션 기법입니다. 예를 들어, 리스트 화면에서 상세 화면으로 전환할 때, 이미지가 화면 전체로 전환되면서 부드럽게 확대되는 효과를 구현할 수 있습니다.

Hero(
  tag: 'imageTag',
  child: GestureDetector(
    onTap: () {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => DetailScreen()),
      );
    },
    child: Image.asset('image.png'),
  ),
)

2. 페이지 전환 애니메이션 커스터마이징

플러터는 페이지 전환 애니메이션을 커스터마이징할 수 있는 다양한 기능을 제공합니다. 페이지가 나타나거나 사라질 때 페이드인/페이드아웃, 슬라이딩 등 다양한 애니메이션 효과를 적용할 수 있습니다.

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => DetailScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      var begin = Offset(1.0, 0.0);
      var end = Offset.zero;
      var curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
      var offsetAnimation = animation.drive(tween);

      return SlideTransition(
        position: offsetAnimation,
        child: child,
      );
    },
  ),
);

3. 애니메이션 상태 관리

화면 전환 애니메이션을 구현할 때 애니메이션의 상태를 관리하는 것이 중요합니다. 애니메이션의 시작, 중지, 완료 등의 상태에 따라 적절한 처리를 해주어야 합니다.

AnimationController _controller;
Animation<double> _animation;

@override
void initState() {
  _controller = AnimationController(
    duration: Duration(seconds: 1),
    vsync: this,
  );
  _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
  super.initState();
}

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

이렇게해서, 플러터를 통해 부드러운 화면 전환 애니메이션을 구현하는 방법을 알아보았습니다. 사용자들이 앱을 사용하는 과정에서 자연스러운 화면 전환을 경험할 수 있도록 애니메이션을 적절히 활용해보세요!