[flutter] 슬라이드 애니메이션 구현하기
안녕하세요! 이번에는 Flutter 앱에서 화면 전환 시 슬라이드 애니메이션을 구현하는 방법에 대해 알아보겠습니다.
1. 페이지 라우팅
먼저, 페이지 라우팅을 통해 화면을 전환합니다. 아래는 페이지 라우트를 설정하는 코드입니다.
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
2. 슬라이드 애니메이션 추가
이제 페이지 전환 시 슬라이드 애니메이션을 추가해보겠습니다. PageRouteBuilder를 사용하여 커스텀 페이지 라우터를 만들어 애니메이션을 적용합니다.
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => SecondScreen(),
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));
return SlideTransition(
position: animation.drive(tween),
child: child,
);
},
),
);
위 코드에서 Offset을 이용하여 애니메이션 방향을 설정하고, PageRouteBuilder의 transitionsBuilder를 사용하여 커스텀 애니메이션을 적용합니다.
3. 결과 확인
이제 앱을 실행하여 화면 전환 시 슬라이드 애니메이션이 적용되는지 확인해보세요.
이상으로 Flutter 앱에서 슬라이드 애니메이션을 구현하는 방법에 대해 알아보았습니다. 감사합니다!