Flutter - Animating Route Transitions | Flutter Animated Navigation | Flutter UI Design

[Music] hey hello friends and welcome to this new flutter video in this we're gonna be taking a look at creating animated navigations or animated route transitions in flutter so we're gonna be creating something like this like when you we have a single button in the screen just for demonstration purposes of course and when we click on this button were presented with a new screen with nice pop-up animation so the duration for this animation is quite long just for demonstration because you in real time apps you don't really need to have this long animations just for transition so I hope you get the idea so let's get started okay so right now we're in a quite simple flutter app that has just two screens the first screen and the second screen the first screen has a simple material button at its center when we click on that button were taken to the second screen and when we click on that back button were taken to the first screen where we started from so right now there is quite a simple transition because this is the transition that is given to you by this material page round so when we click on that button the the other the second screen comes from below and changes in opacity from 0 to 1 so this is quite a simple transition and it is given to you by this material page round ok so let's take a look at the route hierarchy in flutter okay so route is a base class for all routes and flour so we have this over later out and transition route and modal route so the two routes route descendants that we're interested in are the page route and Papa Brown so we're in this tutorial we're gonna be dealing with the page route itself and the pub round implementation is quite simple and we're going to be learning about that in a future tutorial so the page route itself has three more descendants that is the Cupertino page route to the material page route and the page route builder so the behavior in the previous app that I showed you where the screen comes from below and changes in opacity that is given to you by the material page route that itself has its own implementation so the Cupertino page route on the other hand that gives you with same kind of stuff just for the iOS up system and there is a third kind of page route descendant of the page round that is the page round filter so this class will help us in creating of our own transitions in flutter we can scale or we can scale up the second screen from the first screen we can rotate these screens and much more so let's have a look at it okay so back in the app we're going to take a look at that page Ralph builder so we're going to replace this material page out with a page route builder so the space route builder is going to take three arguments so the first argument is going to be a page builder which takes a function that is having three arguments which are the context the animation and the second animation so in the function body we're going to return the second screen because this is the child widget that is going to be returned by the page round builder so the second argument with the page round filter requires is the transition duration so the transition duration is going to be the duration which our animation is going to take so in this case we're just gonna pass in the duration that is in seconds and that is going to be two seconds so two seconds is just for demonstration purposes and you're going to use much less duration for your real-time apps so the third argument that this page round builder is going to require that is the transition builder so this is where the real magic happens so the transition builder also requires three arguments that are going to be the same which are in the page builder so I'm just going to copy those three arguments here and we're going to get a body so in the transition builder there's one more argument that is the widget which is going to be the actual widget that is going to be returned by the page route builder so let let us name this child so this widget child is going to be the same widget that is being returned by this page filter so the second screen is going to be passed in to this transition builder as the child okay so in this transition builder we're going to return an animated widget in this case we're going to be using a simple scale transition which is a type of animated widget predefined type of so and this we're gonna be returning scale transition so in the scale transition requires a simple scale so the scale is going to be of type animation so we're going to be using this animation that we're getting that in this function here so we're just gonna simply pass animation so other than the animation the scale transition also requires a child so for this child we're going to be animating this second screen so this second screen is going being passed to this transition builder as a child so we're going to be returning a child here so this is the same child that is where that we're getting in this function here okay so the third property that this scale transition requires is the alignment so for the alignment we're going to keep that at the center so we're gonna pass simply the alignment dot Center so at this point we only need a semicolon here and let me just reformat the code okay so at this point what I need to do is I need to close the app and run it again and let me just pull up the emulator okay so the app is running let me just minimize the debugger and bring up the app so at this point when I click on the second button you can see that the animation is looking quite weird but we're using the scale property right we're using the simplest scale transition so how do we get that bouncy effect here so for that what we need to do is we need to go back to the code we need to move up at the scale transition and before we pass in the animation to the scale transition we have the access to that animation here okay so what we're going to do here is I'm going to take animation I'm going to update it I'm going to use a curved animation and the curved animation requires a parent that is going to be the same animation object and a curves that is going to be curves dot elastic in and out elastic in and out so you can pass any type of curve that you want for your animation the scale animation but in this case we're going to use a simple elastic in now like I showed you in the previous demonstration so basically what is happening is we're taking the animation from this transition builder we're passing that animation to the curved animation as a parent and it's going to apply the elastic in-and-out curve to this and it's going to return the animation to this animation object so basically we're updating the animation so we're passing this updated animation to the scale transition so at this point when I run the app again let me go back to the app and when I click on this button you can see that the animation is looking quite nice and I have changed the duration to 2 from 2 to 1 so let me take back this to 2 and want to run the app again and go back to the app so you can see that there is a nice bouncy effect to the app ok so you can see that we have implemented this nice-looking bouncy effect for our page transition but the code is looking quite bulky so what we need to do is we need to actually move this code to a new file that is going to be for just this transition let me just cut this page around builder and what we're going to do is I'm just going to create a new file here a new dart file I'm going to name this bouncy page route and in this we're going to create a new class that is the bouncy page route that extends the page route builder ok so what we're going to do here is we're going to create a constructor that is going to be a fancy page route and this is going to take in a widget that is going to be this not widget that that will be the second screen that we're going to make the transition to so this is going to be of type widget that is going to be final widget and widget so what we need to do is we need to call a super function and we need to pass all of the thing that we wrote in the previous class so I'm just going to remove this page route builder here and this bracket here so ok so this is fine and we need to pass in a semicolon so instead of this second screen we're going to pass in the widget okay so let me just reformat the code so basically what we're doing is we have moved that whole transition code to this new class that is called bouncy page route which extends the patriarchy filter so that's why we're calling the super function to pass all the properties to the actual page route builder so in the bouncy page route we have a constructor that is taking the widget to which the transition is going to take place too so we're passing this widget to the page builder like we're doing with that with the second screen so let me just go to the main dart file so instead of that paced round builder what we're going to do is we're going to use this bouncy B or you and see my bouncy page route and to this bouncy page route we're going to pass in the widget that is going to be that second screen so let me just rerun the app and when I come back to the emulator you can see when I click on the app the bouncy effect comes back and we can close and go back to the previous activity okay so I hope you learned much in this tutorial and if you liked the tutorial please hit the like button and the subscribe button your support means a lot so thank you for watching see you next time peace

Channel: RetroPortal Studio

Views: 68,469

Keywords: flutter, flutter PageRouteBuilder, flutter tutorial, flutter tutorial for beginners, flutter animation, flutter screen animation, flutter screen change animation, flutter pageroute, flutter materialpageroute, flutter animated widget, flutter route transition, flutter route animation, flutter page animation, flutter custom route transition, flutter ui, flutter interact, flutter udemy, flutter pageroutebuilder

Id: 6vPF2IqCJ9Q

Length: 10min 7sec (607 seconds)

Published: Wed Dec 18 2019