Page Transitions are used in Flutter to describe the movement of objects from one position to another.
When it comes to Flutter, these elements are similar to Widgets.
What are Page Transitions 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.
To animate our tradition between two different pages, we will use the PageRouteBuilder method. You will definitely get an impression of all the different types of transitions that are possible, and you will also be able to customize them and create your own Custom Transition.
Page Transitions can improve the aesthetics of your flutter app user. This may improve the flow between pages or the speed with which pages load. They can also be used to give video backgrounds or other assets time to load before being displayed.
To animate our transition between pages or widgets, we will use a specific transition technique.
Different Transition Styles in Flutter
In Flutter, there are various types of transitions like:
1) Slide Transition
2) Fade Transition
3) Scale Transition
4) Size Transition
5) Rotation Transition
So, let’s start by understanding each transition individually and writing some code lines for them.
Implementation of Page Navigation with Animation in flutter app
We will need a PageRouteBuilder to create the transition because it gives us the necessary function Object() {Constructor} in return.
We are aware of how simple it is to switch between routes in Flutter. All we have to do is push and pop using Navigator.
For push: The below code will navigate the user from one page to another.
Navigator.push( context, MaterialPageRoute(builder: (context) => SecondRoute()), );
For pop: The below code will remove the top most page/widget/view from the Widget tree stack
Navigator.pop(context);
We discovered that page transitions can really beautify your UI when we started experimenting with animations. Use CupertinoPageRoute if you want a slide transition similar to iOS. There is nothing more to say.
Navigator.push( context, CupertinoPageRoute(builder: (context) =>NextScreen()))
However, for customized transitions There are numerous transition widgets offered by Flutter. Let’s examine their potential uses.
We are aware that the two arguments for Navigator.push are BuildContext context and Route<T> route. With some transition animation, we can design our own unique page route. Start off with a straightforward slide transition.
PageRouteBuilder
A class called PageRouteBuilder extends PageRoute and creates a route that delegates control to builder callbacks.
Class PageRouteBuilder<T> Zero safety a utility class for callback-based definition of one-time page routes. The pageBuilder function, which generates the main contents of the route, must be defined by callers. Define the transitionsBuilder function to add transitions.
PageRouteBuilder properties :
- barrierColor
- barrierDismissible
- maintainState
- opaque
- pageBuilder
- transitionDuration
- transitionBuilder
PageBuilder, transitionDuration, and transitionsBuilder will be used.
PageBuilder:
The routes content is created using this property.
pageBuilder: (context, animation, anotherAnimation) {
return ReturnPage();
},
transitionDuration:
It takes time for the pages to transition between each other.
transitionDuration: Duration(milliseconds: 1000),
transitionBuilder:
The transitions themselves are constructed using this property.
transitionsBuilder:
(context, animation, anotherAnimation, child) {
animation = CurvedAnimation(
curve: curveList[index], parent: animation);
return FadeTransition(
opacity:animation,
child: child,
);
}
Slide Transition:
We will make use of the SlideTransition widgets to implement SlideTransition. A fractional translational transition is produced.
SlideTranstion’s positional property cannot be null.
It is a slightly different transition from the others because it uses Animation Offset rather than Animation Double.Therefore, Animation <Offset> is needed for this transition. Offset essentially refers to the canvas’s coordinate system. It contains both the dx and dy.
Slide Transition widget :
SlideTransition(
position: Tween(
begin: Offset(1.0, 0.0),
end: Offset(0.0, 0.0))
.animate(animation),
child: child,
);
Fade Transition:
A fade/opacity transition is produced.We can use this transition to make any widget or image fade.
The “opacity” property is necessary .The opacity property cannot be empty.
FadeTransition( opacity:animation, child: child, );
Scale Transition:
The scale of the widget is animated during this transition. In this, the necessary property is “scale.”Other properties include child, filterQuality, and alignment.
By altering the child’s scale, this transition brings the route to life.
On the other hand, the widget’s scaling direction is specified by the alignment property.
It is Alignment.center by default.
ScaleTransition( scale: animation, child: child, );
Size Transition:
A size transition is produced by this transition.
The arguments for axis, sizeFactor, and axisAlignment cannot be null. By default, the axis argument is set to Axis.vertical. The child is centered along the main axis during the transition when the axisAlignment’s default value of 0.0 is used.
This transition takes into account the size of the specific widget.
Align( child: SizeTransition( sizeFactor: animation, child: child, axisAlignment: 0.0, ), );
Rotation Transition:
This transition assists in animating a widget’s rotation.
It needs the “turns” property in order to be animated.
RotationTransition( turns: animation, child: child, );
Setting up a PageRouteBuilder
pageBuilder: (context, animation, anotherAnimation) {
return ReturnPage();
},
Navigator.of(context).push(PageRouteBuilder (
page Builder: (context, animation, anotherAnimation) {
return ReturnPage();
},
transitionDuration:Duration (milliseconds: 1000),
transitionsBuilder:
(context, animation, anotherAnimation, child) {
animation = CurvedAnimation (
curve: Curves.bounceIn, parent: animation);
return Rotation Transition(
turns: animation,
child: child,
);
},
),
)
Source Code for references:
In my project, I have used every possible transition. Each transition has a separate file that I’ve created. I’ve connected every file. As you can also see from the gist.
You can prefer this app code , code for click here :
https://github.com/Mitali8620/page_transition_demo_app.git
Conclusion
We have covered how to incorporate various transitions into our app in this blog.
I hope it will aid in your comprehension and provide you with a basic understanding of it.
Gratitude for reading
Have a Good day..!
