Flutter page transition animation / Flutter 페이지 전환 애니메이션
Flutter에서는 페이지 전환 애니메이션을 쉽게 구현할 수 있으며, 다양한 애니메이션을 사용할 수 있습니다. 기본적으로 Flutter의 Navigator를 통해 페이지 전환 애니메이션을 제공하며, 커스텀 애니메이션을 추가하는 방법도 있습니다. 이 글에서는 기본 애니메이션, 커스텀 애니메이션, 그리고 PageRouteBuilder를 사용하는 방법을 설명합니다.
1. 기본 페이지 전환 애니메이션
Flutter의 Navigator는 기본적으로 화면 간 전환 애니메이션을 제공합니다. 예를 들어, MaterialPageRoute는 기본적으로 슬라이딩 애니메이션을 사용하여 새 페이지를 화면에 추가합니다.
기본 페이지 전환 애니메이션 예제
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
},
child: Text('Go to Second Page'),
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back to Home Page'),
),
),
);
}
}이 코드는 기본적인 화면 전환 애니메이션을 제공합니다. Navigator.push를 호출하면 기본적으로 새로운 화면이 오른쪽에서 왼쪽으로 슬라이딩됩니다.
2. 커스텀 페이지 전환 애니메이션
PageRouteBuilder를 사용하면 전환 애니메이션을 커스터마이즈할 수 있습니다. 이를 통해 다양한 애니메이션 효과를 적용할 수 있습니다.
커스텀 애니메이션 예제
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (context, animation, secondaryAnimation) => SecondPage(),
transitionsBuilder: (context, animation, secondaryAnimation, child) {
const begin = Offset(1.0, 0.0);
const end = Offset.zero;
const curve = Curves.easeInOut;
var tween = Tween(begin: begin, end: end);
var offsetAnimation = animation.drive(tween.chain(CurveTween(curve: curve)));
return SlideTransition(position: offsetAnimation, child: child);
},
),
);
},
child: Text('Go to Second Page'),
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back to Home Page'),
),
),
);
}
}코드 설명
PageRouteBuilder: 페이지 전환 애니메이션을 커스터마이즈하는 데 사용됩니다.pageBuilder: 새 페이지를 정의합니다.transitionsBuilder: 애니메이션을 정의합니다. 여기서는SlideTransition을 사용하여 페이지가 오른쪽에서 왼쪽으로 슬라이딩하는 효과를 적용합니다.Tween과Animation: 애니메이션의 시작과 끝을 정의합니다.
3. PageTransitionsBuilder를 사용한 커스텀 전환
PageTransitionsBuilder를 사용하면 전환 애니메이션을 전역적으로 설정할 수 있습니다. 이를 통해 애플리케이션의 전체적인 전환 애니메이션을 제어할 수 있습니다.
PageTransitionsBuilder 사용 예제
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
theme: ThemeData(
pageTransitionsTheme: PageTransitionsTheme(
builders: {
TargetPlatform.android: CustomPageTransitionsBuilder(),
TargetPlatform.iOS: CustomPageTransitionsBuilder(),
},
),
),
);
}
}
class CustomPageTransitionsBuilder extends PageTransitionsBuilder {
@override
PageTransitionsSwitcherBuilder buildTransitions(
PageTransitionsBuilderContext context) {
return _CustomPageTransitionsSwitcherBuilder();
}
}
class _CustomPageTransitionsSwitcherBuilder
extends PageTransitionsSwitcherBuilder {
@override
Widget buildTransitions(
PageTransitionsSwitcherContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
const begin = Offset(1.0, 0.0);
const end = Offset.zero;
const curve = Curves.easeInOut;
var tween = Tween(begin: begin, end: end);
var offsetAnimation = animation.drive(tween.chain(CurveTween(curve: curve)));
return SlideTransition(position: offsetAnimation, child: child);
}
}
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondPage()),
);
},
child: Text('Go to Second Page'),
),
),
);
}
}
class SecondPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Second Page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back to Home Page'),
),
),
);
}
}코드 설명
PageTransitionsTheme: 전체 앱의 페이지 전환 애니메이션을 설정합니다.CustomPageTransitionsBuilder: 사용자 정의 페이지 전환 애니메이션을 정의합니다.PageTransitionsSwitcherBuilder: 실제 전환 애니메이션을 빌드합니다.
요약
- 기본 페이지 전환 애니메이션: Flutter의
Navigator를 통해 기본적으로 제공됩니다. - 커스텀 애니메이션:
PageRouteBuilder를 사용하여 애니메이션을 커스터마이즈할 수 있습니다. - 전역 애니메이션 설정:
PageTransitionsTheme과PageTransitionsBuilder를 사용하여 전체 앱의 페이지 전환 애니메이션을 설정할 수 있습니다.
이 방법들을 통해 Flutter 애플리케이션에서 다양한 페이지 전환 애니메이션을 구현하고 사용자 경험을 향상시킬 수 있습니다.