DONGURAN

플러터에서는 아주 간편하게 'Navigator'인스턴스를 사용하여 스크린, 페이지를 자유롭게 이동할 수 있다.

심지어 return값까지 받을 수 있다.

하지만 페이지를 이동할 때 단순히 보여줄 때도 있지만,

자연스럽게 애니메이션 효과를 넣어서 이동한다면 사용자 입장에서 더욱 부드러운 경험을 갖게 된다.

지금부터 작성하는 것은 아마 앞으로 나도 자주 현재 페이지를 방문할 것 같다.

애니메이션을 표현하는 대표적인 단어

- Fade : 흐리게(opacity)

- Scale : 크기

- Translate : x, y축으로 이동

- Tween : 직선

- Spring : 완곡하게

위의 정도가 있다고 알고 사용하면 된다.

애니메이션 효과를 주는 것은 Flutter팀에서 제공하는 라이브러리 또는 PageRouteBuilder위젯을 사용하여 표현할 수 있다.

1. 플러터 팀에서 제공하는 페이지 애니메이션 라이브러리

이름 : animations

링크 : https://pub.dev/packages/flutter_staggered_animations

add

flutter pub add flutter_staggered_animations

import

import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';

위 라이브러리는 정말 친절하게도 본인이 만든 리스트나 페이지에 애니메이션을 주고 싶은 경우

해당 위젯을 감싸주기만 하면된다.

내가 ListView.builder를 사용해서 리스트를 만들고, 내부에 아이템을 추가한 경우이다

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: ListView.builder(
      itemCount: datas.length,
      itemBuilder: (context, index) {
        return Text("item[$index]");
      }
    )
  );
}

위의 위젯에 라이브러리를 사용하고 싶은 경우 다음과 같이

AnimationLimiter, AnimationConfiguration.staggeredList, SlideAnimation(+FadeInAnimation)위젯으로 감싸주면 된다.

@override
Widget build(BuildContext context) {
  return SafeArea(
    child: AnimationLimiter(
      child: LiseView.builder(
        itemCount: datas.length,
        itemBuilder: (context, index) {
          return AnimationConfiguration.staggeredList(
            position: index,
            child: SlideAnimation(
              verticalOffset: 50.0,
              child: FadeInAnimation(
                child: Text("item[index]")
              )
            )
          );
        }
      )
    )
  );
}

2. PageRouteBuilder를 사용한 애니메이션

PageRouteBuilder는 Navigator함수 내부에서 사용한다.

아래의 코드는 다른 스크린 위젯을 띄어주는데

우측에서 좌측으로 이동되면서 점점 FadeIn흐릿하면서 선명해지는 동작이다.

  await Navigator.push(context,
    PageRouteBuilder(
     pageBuilder: (context, animation, secondaryAnimation) {
        return SecondaryScreen(data: data);
      },
     transitionsBuilder: (context, animation, secondaryAnimation, child) {
       const begin = Offset(1.0, 0.0);
       const end = Offset.zero;
       const curve = Curves.easeInOut;

       var slideTween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
       var fadeTween = Tween<double>(begin: 0.0, end: 1.0).chain(CurveTween(curve: curve));

       var slideAnimation = animation.drive(slideTween);
       var fadeAnimation = animation.drive(fadeTween);

       return SlideTransition(
         position: slideAnimation,
         child: FadeTransition(
           opacity: fadeAnimation,
           child: child,
         ),
       );
     },
      transitionDuration: const Duration(milliseconds: 450),
  ));

pageBuilder함수 파라메터에는 다음 보여줄 위젯을 설정해준다.

애니메이션을 넣어줄 곳은 transitionBuilder함수파라메터에서 설정해준다.

(예시 이미지는 추후 업로드 하도록 하겠습니다.)

감사합니다🍖