1. Create a CustomPage
for page_transition
:
import 'package:flutter/material.dart';
import 'package:page_transition/page_transition.dart';
class PageTransitionLibraryPage extends Page {
final Widget child;
final PageTransitionType type;
final Duration duration;
final Alignment? alignment; // Optional alignment for certain transitions
const PageTransitionLibraryPage({
required this.child,
required this.type,
this.duration = const Duration(milliseconds: 300),
this.alignment,
LocalKey? key,
String? name,
Object? arguments,
}) : super(key: key, name: name, arguments: arguments);
@override
Route createRoute(BuildContext context) {
return PageTransition(
type: type,
duration: duration,
alignment: alignment,
settings: this,
child: child,
);
}
}
2. Use the PageTransitionLibraryPage
in NavigationData
or globalPageBuilder
:
Per-Page Example:
NavigationData(
label: 'Page Transition Example',
url: '/page-transition',
builder: (context, routeData, globalData) => PageTransitionExamplePage(),
pageBuilder: ({key, name, child, routeData, globalData, arguments}) {
return PageTransitionLibraryPage(
key: key,
name: name,
arguments: arguments,
child: child,
type: PageTransitionType.scale,
alignment: Alignment.bottomCenter,
duration: Duration(milliseconds: 500),
);
},
),
Global Example:
final CustomPageBuilder globalPageBuilder = ({
key,
name,
child,
routeData,
globalData,
arguments,
}) {
return PageTransitionLibraryPage(
key: key,
name: name,
arguments: arguments,
child: child,
type: PageTransitionType.fade,
duration: Duration(milliseconds: 400),
);
};
// In your main app initialization:
NavigationManager.init(
mainRouterDelegate: DefaultRouterDelegate(
navigationDataRoutes: routes,
pageBuilder: globalPageBuilder,
),
routeInformationParser: DefaultRouteInformationParser(),
);
Available PageTransitionType
s:
The page_transition
library offers a variety of transition types, including:
fade
rightToLeft
leftToRight
upToDown
downToUp
scale
rotate
size
rightToLeftWithFade
leftToRightWithFade
- And more!
Refer to the page_transition
documentation for a complete list and more detailed customization options.