PageTransition<T> constructor
PageTransition<T> ({
- Key? key,
- required Widget child,
- required PageTransitionType type,
- Widget? childCurrent = null,
- BuildContext? ctx,
- bool inheritTheme = false,
- Curve curve = Curves.linear,
- Alignment? alignment,
- Duration duration = const Duration(milliseconds: 300),
- Duration reverseDuration = const Duration(milliseconds: 300),
- bool fullscreenDialog = false,
- bool opaque = false,
- RouteSettings? settings,
Page transition constructor. We can pass the next page as a child,
Implementation
PageTransition({
Key? key,
required this.child,
required this.type,
this.childCurrent = null,
this.ctx,
this.inheritTheme = false,
this.curve = Curves.linear,
this.alignment,
this.duration = const Duration(milliseconds: 300),
this.reverseDuration = const Duration(milliseconds: 300),
this.fullscreenDialog = false,
this.opaque = false,
RouteSettings? settings,
}) : assert(inheritTheme ? ctx != null : true,
"'ctx' cannot be null when 'inheritTheme' is true, set ctx: context"),
super(
pageBuilder: (BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return inheritTheme
? InheritedTheme.captureAll(
ctx!,
child,
)
: child;
},
transitionDuration: duration,
reverseTransitionDuration: reverseDuration,
settings: settings,
maintainState: true,
opaque: opaque,
fullscreenDialog: fullscreenDialog,
transitionsBuilder: (BuildContext context,
Animation<double> animation,
Animation<double> secondaryAnimation,
Widget child) {
switch (type) {
case PageTransitionType.fade:
return FadeTransition(opacity: animation, child: child);
// ignore: dead_code
break;
/// PageTransitionType.rightToLeft which is the give us right to left transition
case PageTransitionType.rightToLeft:
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(1, 0),
end: Offset.zero,
).animate(animation),
child: child,
);
// ignore: dead_code
break;
/// PageTransitionType.leftToRight which is the give us left to right transition
case PageTransitionType.leftToRight:
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(-1, 0),
end: Offset.zero,
).animate(animation),
child: child,
);
// ignore: dead_code
break;
/// PageTransitionType.topToBottom which is the give us up to down transition
case PageTransitionType.topToBottom:
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, -1),
end: Offset.zero,
).animate(animation),
child: child,
);
// ignore: dead_code
break;
/// PageTransitionType.downToUp which is the give us down to up transition
case PageTransitionType.bottomToTop:
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(0, 1),
end: Offset.zero,
).animate(animation),
child: child,
);
// ignore: dead_code
break;
/// PageTransitionType.scale which is the scale functionality for transition you can also use curve for this transition
case PageTransitionType.scale:
return ScaleTransition(
alignment: alignment!,
scale: CurvedAnimation(
parent: animation,
curve: Interval(
0.00,
0.50,
curve: curve,
),
),
child: child,
);
// ignore: dead_code
break;
/// PageTransitionType.rotate which is the rotate functionality for transition you can also use alignment for this transition
case PageTransitionType.rotate:
return new RotationTransition(
alignment: alignment!,
turns: animation,
child: ScaleTransition(
alignment: alignment,
scale: animation,
child: FadeTransition(
opacity: animation,
child: child,
),
),
);
// ignore: dead_code
break;
/// PageTransitionType.size which is the rotate functionality for transition you can also use curve for this transition
case PageTransitionType.size:
return Align(
alignment: alignment!,
child: SizeTransition(
sizeFactor: CurvedAnimation(
parent: animation,
curve: curve,
),
child: child,
),
);
// ignore: dead_code
break;
/// PageTransitionType.rightToLeftWithFade which is the fade functionality from right o left
case PageTransitionType.rightToLeftWithFade:
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(1.0, 0.0),
end: Offset.zero,
).animate(animation),
child: FadeTransition(
opacity: animation,
child: SlideTransition(
position: Tween<Offset>(
begin: const Offset(1, 0),
end: Offset.zero,
).animate(animation),
child: child,
),
),
);
// ignore: dead_code
break;
/// PageTransitionType.leftToRightWithFade which is the fade functionality from left o right with curve
case PageTransitionType.leftToRightWithFade:
return SlideTransition(
position: Tween<Offset>(
begin: const Offset(-1.0, 0.0),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: animation,
curve: curve,
),
),
child: FadeTransition(
opacity: animation,
child: SlideTransition(
position: Tween<Offset>(
begin: const Offset(-1, 0),
end: Offset.zero,
).animate(animation),
child: child,
),
),
);
// ignore: dead_code
break;
case PageTransitionType.rightToLeftJoined:
assert(childCurrent != null, """
When using type "rightToLeftJoined" you need argument: 'childCurrent'
example:
child: MyPage(),
childCurrent: this
""");
return Stack(
children: <Widget>[
SlideTransition(
position: Tween<Offset>(
begin: const Offset(0.0, 0.0),
end: const Offset(-1.0, 0.0),
).animate(
CurvedAnimation(
parent: animation,
curve: curve,
),
),
child: childCurrent,
),
SlideTransition(
position: Tween<Offset>(
begin: const Offset(1.0, 0.0),
end: Offset.zero,
).animate(
CurvedAnimation(
parent: animation,
curve: curve,
),
),
child: child,
)
],
);
// ignore: dead_code
break;
case PageTransitionType.leftToRightJoined:
assert(childCurrent != null, """
When using type "leftToRightJoined" you need argument: 'childCurrent'
example:
child: MyPage(),
childCurrent: this
""");
return Stack(
children: <Widget>[
SlideTransition(
position: Tween<Offset>(
begin: const Offset(-1.0, 0.0),
end: const Offset(0.0, 0.0),
).animate(
CurvedAnimation(
parent: animation,
curve: curve,
),
),
child: child,
),
SlideTransition(
position: Tween<Offset>(
begin: const Offset(0.0, 0.0),
end: const Offset(1.0, 0.0),
).animate(
CurvedAnimation(
parent: animation,
curve: curve,
),
),
child: childCurrent,
)
],
);
// ignore: dead_code
break;
/// FadeTransitions which is the fade transition
default:
return FadeTransition(opacity: animation, child: child);
}
},
);