flutter 뿐만 아니라 어떤 앱을 개발하더라도 시각효과는 필요로 하다.
특히나 가장 많이 쓰는 페이지 전환 효과
화면과 화면 사이에 전환 효과를 넣어주면 좀 더 부드럽고 유저 입장에서도 딜레이 되는 시간을 느끼지 못하게 빠르거나 부드럽다는 느낌을 주곤 한다.
flutter 쿡북에서 제공하고 있는 예제이다.
https://docs.flutter.dev/cookbook/animation/page-route-animation
Animate a page route transition
How to animate from one page to another.
docs.flutter.dev
PageRouteBuilder와 tween을 만들고 animatedWidget을 활용하여 경로 전환을 생성하고 이용을 한다.
import 'package:flutter/material.dart';
void main() {
runApp(
const MaterialApp(
home: Page1(),
),
);
}
class Page1 extends StatelessWidget {
const Page1({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).push(_createRoute());
},
child: const Text('Go!'),
),
),
);
}
}
Route _createRoute() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return child;
},
);
}
class Page2 extends StatelessWidget {
const Page2({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: const Center(
child: Text('Page 2'),
),
);
}
}기본 루트 materialApp에 메인 페이지가 되는 Page1을 home에 설정해둔다..
StatelessWidget을 상속 받아서 build에 각종 앱바등을 설정을 한다.
첫화면에서 ElevatedButton을 터치시 Route _createdRoute로 이동한다.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).push(_createRoute());
},
child: const Text('Go!'),
),
),
);
Route _createRoute() {
return PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
return child;
},
);
}
만들어진 라우터에는 Page2를 생성해서 return 시켜준다.
최종적으로 page2페이지가 나오고 종료되게 된다.
여기까지가 기본 뼈대이고 이후에 tween을 생성하여 페이지 사이에 전환 효과를 넣는다.
transitionBuilder의 파라메터는 context, animation,secondaryAnimation, child를 받는다.
그리고 Tween을 설정하는데 시작옵셋과 종료 옵셋을 넣어주면 된다.
그 다음으로 AnimatedWidget을 활용하여 옵셋값이 변경될때마다 자식을 가져와서 리턴시킨다.
애니메이션이라고 무조건 똑같고 규칙적이지 않고 시간이나 속도를 조절하면 좀 더 미려한 효과를 줄 수 있다.
CurveTween을 활용하면 된다.
최종 예제를 보면 go버튼을 누르면 아래에서 위로 슬라이딩 되면서 다음 페이지가 올라오게 된다.