플러터에서는 아주 간편하게 '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함수파라메터에서 설정해준다.
(예시 이미지는 추후 업로드 하도록 하겠습니다.)
감사합니다🍖
