Navigation in Flutter
Hello dear coder! today I’ll be explaining and sharing with you some amazing navigation effects which we definitely need in our apps. I personally got very bored looking at the navigation pop-ups. So I decided to change my navigation effects and wrote a Navigation class which I’ll be sharing with you guys.
Let me show the types of animated navigations I’ll be explaining are:-
1. Bounce-In-Navigation
2. Slide-Navigation
3. Down-Slide-Navigation
4. Fade-In-Navigation
Bounce In Navigation
The most important class we would need throughout the process will be PageRouteBuilder which will help us to implement the navigations between the screens with animation. I’ll be providing the code for each and every class I have implemented in my projects so kindly refer them while reading.
As you can see above we are having a class named BounceInNavigation class which extends PageRouteBuilder which is the backbone to build animated navigation. So in this code, I have passed a widget that is accepted/initialized using named parameter constructor and after that is have passed the animation regarding code in super() which is passed to the parent class of our user-defined class BounceInNavigation.
super() parameters:
transitionDuration : It used to defined the time to be taken for the app to navigate the screen with animations basically it is the duration set for the animations.
transitionsBuilder : This is a builder function that accepts required parameter as BuildContext and Animation<double> the generic argument double is used to specify the type of argument we will be implementing Animation<double> double argument is used to specify the duration of the animation and child widget. Coming to the first parameter of our builder which is animation CurvedAnimation is used to initialize this parameter and this CurvedAnimation has 2 required parameters parent and curve, so parameter parent is initialized with animation value and the curve parameter is initialized with Curve class using its static const easeInOutBack, so this was the part of initializing our animation parameter now the time comes to return a Widget from our class for which I have used the ScaleTransition class and pass on the values of the required parameters.
pagebuilder : Done with the builder function not the main parameter our super() is pugebuilder which has the values we worked on above such as our animation and animationduration and it returns the widget too by which we can have our animation effect while navigating to different screens.
*NOTE*
The execution and implementing procedure is the same for all classes the only thing which changes is the animation Transition effects,curve and the duration rest all is the same so I’ll be sharing the code for all of them but do follow the process as mentioned above.
Slide-In Navigation
So what's new in this Slide-In navigation effect:
SlideTransition class is used in it rest all are same, the most important parameter which I think is worth explaining is the position which accepts the Tween<Offset>() class with generic value as Offset class this is used to specify the position from which our navigation will take place is short from where it will begin and end, this is done with the help of x and y-axis. It has 2 required parameters begin and ends to which we assign the x-axis and y-axis position from start to end and this is done with the help of Offset(double-x,double-y)
Down-Slide-In Navigation
Fade-In Navigation
How to class these classes?
Navigator.push(context,FadeNavigation(widget: LoginScreen()));That’s all folks I don’t want to make it a big one though, so just kept it simple and feel free to copy and paste the code in your projects.
If you liked the article don't forget to leave some claps and follow me for more interesting articles on flutter development.
Check out my recent article on developing a Github app:
You can also check out my work related to flutter development on my LinkedIn profile
