Created
December 2, 2020 18:34
-
-
Save littleironical/30d613baaaf54f08e2a4859caaa2b223 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ONE-WAY IMPLEMENTATION | |
Navigator.push(context, SlideLeftRoute(page: Screen2())); | |
// 1. SLIDE TRANSITION | |
class SlideLeftRoute extends PageRouteBuilder { | |
final Widget page; | |
SlideLeftRoute({this.page}) | |
: super( | |
pageBuilder: ( | |
BuildContext context, | |
Animation<double> animation, | |
Animation<double> secondaryAnimation, | |
) => | |
page, | |
transitionsBuilder: ( | |
BuildContext context, | |
Animation<double> animation, | |
Animation<double> secondaryAnimation, | |
Widget child, | |
) => | |
SlideTransition( | |
position: Tween<Offset>( | |
begin: const Offset(1, 0), | |
end: Offset.zero, | |
).animate(animation), | |
child: child, | |
), | |
); | |
} | |
// 2. SCALE TRANSITION | |
class ScaleRoute extends PageRouteBuilder { | |
final Widget page; | |
ScaleRoute({this.page}) | |
: super( | |
pageBuilder: ( | |
BuildContext context, | |
Animation<double> animation, | |
Animation<double> secondaryAnimation, | |
) => | |
page, | |
transitionsBuilder: ( | |
BuildContext context, | |
Animation<double> animation, | |
Animation<double> secondaryAnimation, | |
Widget child, | |
) => | |
ScaleTransition( | |
scale: Tween<double>( | |
begin: 0.0, | |
end: 1.0, | |
).animate( | |
CurvedAnimation( | |
parent: animation, | |
curve: Curves.fastOutSlowIn, | |
), | |
), | |
child: child, | |
), | |
); | |
} | |
// 3. SIZE TRANSITION | |
class SizeRoute extends PageRouteBuilder { | |
final Widget page; | |
SizeRoute({this.page}) | |
: super( | |
pageBuilder: ( | |
BuildContext context, | |
Animation<double> animation, | |
Animation<double> secondaryAnimation, | |
) => | |
page, | |
transitionsBuilder: ( | |
BuildContext context, | |
Animation<double> animation, | |
Animation<double> secondaryAnimation, | |
Widget child, | |
) => | |
Align( | |
child: SizeTransition( | |
sizeFactor: animation, | |
child: child, | |
), | |
), | |
); | |
} | |
// 4. FADE TRANSITION | |
class FadeRoute extends PageRouteBuilder { | |
final Widget page; | |
FadeRoute({this.page}) | |
: super( | |
pageBuilder: ( | |
BuildContext context, | |
Animation<double> animation, | |
Animation<double> secondaryAnimation, | |
) => | |
page, | |
transitionsBuilder: ( | |
BuildContext context, | |
Animation<double> animation, | |
Animation<double> secondaryAnimation, | |
Widget child, | |
) => | |
FadeTransition( | |
opacity: animation, | |
child: child, | |
), | |
); | |
} | |
// 5. ROTATION TRANSITION | |
class RotationRoute extends PageRouteBuilder { | |
final Widget page; | |
RotationRoute({this.page}) | |
: super( | |
pageBuilder: ( | |
BuildContext context, | |
Animation<double> animation, | |
Animation<double> secondaryAnimation, | |
) => | |
page, | |
transitionDuration: Duration(seconds: 1), | |
transitionsBuilder: ( | |
BuildContext context, | |
Animation<double> animation, | |
Animation<double> secondaryAnimation, | |
Widget child, | |
) => | |
RotationTransition( | |
turns: Tween<double>( | |
begin: 0.0, | |
end: 1.0, | |
).animate( | |
CurvedAnimation( | |
parent: animation, | |
curve: Curves.linear, | |
), | |
), | |
child: child, | |
), | |
); | |
} | |
// TWO-WAY IMPLEMENTATION | |
Navigator.push(context, EnterExitRoute(exitPage: this, enterPage: Screen2())); | |
// EXAMPLE 1 | |
class EnterExitRoute extends PageRouteBuilder { | |
final Widget enterPage; | |
final Widget exitPage; | |
EnterExitRoute({this.exitPage, this.enterPage}) | |
: super( | |
pageBuilder: ( | |
BuildContext context, | |
Animation<double> animation, | |
Animation<double> secondaryAnimation, | |
) => | |
enterPage, | |
transitionsBuilder: ( | |
BuildContext context, | |
Animation<double> animation, | |
Animation<double> secondaryAnimation, | |
Widget child, | |
) => | |
Stack( | |
children: <Widget>[ | |
SlideTransition( | |
position: new Tween<Offset>( | |
begin: const Offset(0.0, 0.0), | |
end: const Offset(-1.0, 0.0), | |
).animate(animation), | |
child: exitPage, | |
), | |
SlideTransition( | |
position: new Tween<Offset>( | |
begin: const Offset(1.0, 0.0), | |
end: Offset.zero, | |
).animate(animation), | |
child: enterPage, | |
) | |
], | |
), | |
); | |
} | |
// EXAMPLE 2 | |
class ScaleRotateRoute extends PageRouteBuilder { | |
final Widget page; | |
ScaleRotateRoute({this.page}) | |
: super( | |
pageBuilder: ( | |
BuildContext context, | |
Animation<double> animation, | |
Animation<double> secondaryAnimation, | |
) => | |
page, | |
transitionDuration: Duration(seconds: 1), | |
transitionsBuilder: ( | |
BuildContext context, | |
Animation<double> animation, | |
Animation<double> secondaryAnimation, | |
Widget child, | |
) => | |
ScaleTransition( | |
scale: Tween<double>( | |
begin: 0.0, | |
end: 1.0, | |
).animate( | |
CurvedAnimation( | |
parent: animation, | |
curve: Curves.fastOutSlowIn, | |
), | |
), | |
child: RotationTransition( | |
turns: Tween<double>( | |
begin: 0.0, | |
end: 1.0, | |
).animate( | |
CurvedAnimation( | |
parent: animation, | |
curve: Curves.linear, | |
), | |
), | |
child: child, | |
), | |
), | |
); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment