Page Transitions in Flutter
In this post, we shall discuss the page routes transitions in flutter. We will use the PageRouteBuilder method to animate our tradition between two different pages. You will definitely get an illusion of all types of transitions that are possible and you will be able to customize them as well and make your own Custom Transition.
Table of contents:
Transition in flutter
In general, a transition is nothing but moving an object from one place to another. In flutter, it is also the same but in terms of widgets like container, button, and also pages since everything in flutter is itself a widget.
We will be using a certain transition technique to animate our transition between two pages or widgets.
Implementation
To set up a transition we will require a PageRouteBuilder since in return it provides us the required constructor.
PageRouteBuilder
PageRouteBuilder is a class that extends PageRoute, it creates a route that delegates to builder callbacks.
Properties
- barrierColor
- barrierDismissible
- maintainState
- opaque
- pageBuilder
- transitionDuration
- transitionBuilder
We will be using pageBuilder, transitionDuration, transitionsBuilder.
pageBuilder
This property is used to build the content of the routes.
pageBuilder: (context, animation, anotherAnimation) {
return ReturnPage();
},
transitionDuration
It takes the duration until the transition will last between pages.
transitionDuration: Duration(milliseconds: 2000),
transitionBuilder
This property is used to build the actual transitions.
transitionsBuilder:
(context, animation, anotherAnimation, child) {
animation = CurvedAnimation(
curve: curveList[index], parent: animation);
return FadeTransition(
opacity:animation,
child: child,
);
}
Slide Transition
To implement SlideTranstion we will use the SlideTransition widgets. It creates a fractional translational transition.
positional property in SlideTranstion can’t be null.
SlideTranstion widget
SlideTransition(
position: Tween(
begin: Offset(1.0, 0.0),
end: Offset(0.0, 0.0))
.animate(animation),
child: child,
);
Fade Transition
It creates a fade/opacity transition.
opacity property can’t be null.
FadeTransition(
opacity:animation,
child: child,
);
Scale Transition
This transition animates the route by controlling the scale of the child.
The scale property must not be null. The alignment argument defaults to Alignment.center.
ScaleTransition(
scale: animation,
child: child,
);
Size Transition
This transition creates a size transition.
The axis, sizeFactor, and axisAlignment arguments must not be null. The axis argument defaults to Axis.vertical. The axisAlignment defaults to 0.0, which centers the child along the main axis during the transition.
Align(
child: SizeTransition(
sizeFactor: animation,
child: child,
axisAlignment: 0.0,
),
);
Rotation Transition
It creates a rotation transition.
The turn argument must not be null.
RotationTransition(
turns: animation,
child: child,
);
Constructing a PageRouteBuilder
Designing the UI
main.dart
I have taken all the possible transitions in my project. I have made a different file for each transition. I have used pageNamed method to connect all the files. As you can see in the gist as well.
https://gist.github.com/anmolseth06/b8106796cb31bcef35b48d8c46919c0e#file-main-dart
list.dart
I have takes all the possible Curvers that are available in flutter, so that we can see and examine all the Transition.
https://gist.github.com/anmolseth06/3b846cf48177cda4cf77d48b8160b025#file-list-dart
sizeAnimation.dart
We are building the ListTile of all the 40 curves that are available for us.
On tapping on ListTile we will see the transition linked to it.
https://gist.github.com/anmolseth06/569254ed3d45d9d542a03a935ef67f5b#file-sizeanimation-dart
Similarly, I have made 5 different files for all the Transition as you can see them in my GitHub project.
Github Link
flutter-devs/page-route-transition-demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Thanks for reading this article ❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
If we got something wrong? Let me know in the comments. we would love to improve.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
