앱 내에서 네비게이션을 다루는 데에는 Drawer 위젯이 유용하게 사용됩니다. 하지만 플러터에서 기본적으로 제공되는 Drawer의 페이지 전환 애니메이션은 제한적일 수 있습니다. 이번 블로그 포스트에서는 플러터 Drawer를 커스터마이징하여 더 다양한 페이지 전환 애니메이션을 구현하는 방법에 대해 알아보겠습니다.
1. 커스텀 Drawer 위젯 생성
우선, 페이지 전환 애니메이션을 커스터마이징하기 위해 Drawer 위젯을 커스텀으로 생성해야 합니다. 다음과 같은 코드를 사용하여 커스텀 Drawer 위젯을 생성합니다.
import 'package:flutter/material.dart';
class CustomDrawer extends StatefulWidget {
@override
_CustomDrawerState createState() => _CustomDrawerState();
}
class _CustomDrawerState extends State<CustomDrawer> {
@override
Widget build(BuildContext context) {
return Drawer(
// Drawer 내용 구성
);
}
}
2. 페이지 전환을 위한 커스텀 메서드 생성
애니메이션 커스터마이징을 위해 페이지 전환을 담당하는 커스텀 메서드를 생성해야 합니다. 이 메서드에서는 Navigator 클래스를 사용하여 페이지 전환 및 애니메이션을 처리합니다. 다음은 커스텀 메서드의 예시 코드입니다.
void navigateToPage(BuildContext context, Widget nextPage) {
Navigator.push(
context,
PageRouteBuilder(
pageBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
return nextPage;
},
transitionsBuilder: (BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child) {
// 애니메이션 처리
return FadeTransition(
opacity: animation,
child: child,
);
},
),
);
}
위 코드에서는 페이지 전환에 FadeTransition 애니메이션을 사용하였습니다. 다른 애니메이션을 원할 경우, transitionsBuilder에서 원하는 애니메이션을 구현하면 됩니다.
3. 커스텀 Drawer에서 사용할 페이지 전환 버튼 추가
커스텀 Drawer 위젯 내에서 페이지 전환을 담당할 버튼을 추가합니다. 여기서는 RaisedButton 위젯을 사용하여 버튼을 생성하였습니다. 아래 코드는 커스텀 Drawer 내에 “Page 1”로 전환하는 버튼을 추가한 예시입니다.
class _CustomDrawerState extends State<CustomDrawer> {
@override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
// 페이지 전환 버튼
RaisedButton(
child: Text('Page 1'),
onPressed: () {
navigateToPage(context, Page1());
},
),
// 다른 페이지 전환 버튼들
],
),
);
}
}
위 코드에서 navigateToPage 메서드는 페이지 전환을 수행하고, Page1은 전환할 페이지 위젯입니다.
4. 커스텀 Drawer 사용하기
마지막으로, 커스텀 Drawer를 앱에서 사용하도록 설정해야 합니다. 이를 위해 Scaffold 위젯 내에서 drawer 속성을 수정하여 커스텀 Drawer를 사용합니다.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Custom Drawer Example',
home: Scaffold(
appBar: AppBar(
title: Text('Custom Drawer Example'),
),
drawer: CustomDrawer(),
body: Center(
child: Text('Home Page'),
),
),
);
}
}
위 코드에서 AppBar 위젯의 drawer 속성을 수정하여 커스텀 Drawer를 연결하였습니다.
이제 앱을 실행하고, Drawer를 열어서 페이지 전환 버튼을 클릭해보세요. 페이지 전환 애니메이션이 커스터마이징된 것을 확인할 수 있습니다.
이처럼, 플러터 Drawer를 커스터마이징하여 페이지 전환 애니메이션을 자유롭게 구현할 수 있습니다. 이를 응용하여 다양한 페이지 전환 효과를 구현해보세요!