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 PageTransitionTypes:
The page_transition library offers a variety of transition types, including:
faderightToLeftleftToRightupToDowndownToUpscalerotatesizerightToLeftWithFadeleftToRightWithFade- And more!
Refer to the page_transition documentation for a complete list and more detailed customization options.