Flutter Custom & Staggered Page Transition Animation Tutorial

navigating between routes is quite bland by default flutter graciously provides you with the material page route and Cupertino page route classes and while their transition animations don't look bad there's certainly something more we can do could we for example animate parts of the pushed page independently and even make the animation staggered like this of course we can we are in flutter after all hello welcome to resew corner where you are getting prepared for real app development so that you will get freelance clients or a job and be confident about the apps you built so subscribe and hit the bell to join us on our quest for becoming in demand flutter developers as if already seen by the end of this tutorial you are going to know how to build this kind of a fully custom page transition animation which is in addition staggered so we hit this floating action button and you can see that the red container animates in first and only after that the green container animates in to the page this is in contrast with default page transitions where they are material or cupertino which just simply enemy the whole page at once and not its parts individually we have this kind of a starter project already prepared so that you don't need to build out the basics from the scratch it contains two pages the first page and second page just like in the already finished app but the difference is that currently the second page in this start project is just animated as a whole using the material page route and if you want to get this starter project and also learn at your own pace from a writer tutorial be sure to check out the written tutorial from the link in the video description let's launch this app and see how it looks like right now with this material page route here it is and sure enough it looks as we would expect it to the whole pages animates at once but what's nice is that this floating action button hero animation we have that sort of for free because heroes are animated automatically and they are certainly one type of a cross page animation in order to animate parts of a page independently we just simply need to get rid of this material pager out present inside the first page widget that's because material page route hides a few parameters from us and it simply uses them itself to animate the whole page at once what we need to do or have here instead is a page route builder and instead of a builder this thing takes in a page builder and it doesn't just give us context but also it gives us an animation and also something called secondary animation let's make this into a block body method like this and now we have the animation and secondary animation so what are they well animations in flutter if you don't know already are basically just a value which is smoothly transitioning between its start and end boundaries of course there is more to it it's also a listenable so we can listen to those changes but in essence it's really just in this case a double so number transitioning between two values in a smooth way and if you need to brush up on animation skills yourself you check out a tutorial from the cart in the corner and what's up with this animation and secondary animation well we are only interested in this animation because this one is for when this actual route itself is being animated to be visible secondary animation is used when another route is being animated on top of this second page so we are not going to use that and what do we want to do with this animation well we are just going to pass it in to the second page under the parameter name argument name transition animation and pass in the animation we're going to create this sort of a field in the second page widget in just a bit and as with any animation even page transitions can be configured to have a certain duration which is by default set to be 300 milliseconds but we want to make it a bit longer so let's set transition duration here we're going to set it to Const duration and let's say seconds 1 just so that we can see it for a longer period of time and also watch out because we are using paid route builder directly inside our widget tree and using navigator of push this is not necessarily a bad thing to do when you have just a small Avenue are just testing things out but as soon as you get to any production rate app you should really use push named and error named methods and instead of having your Pedro builders scattered throughout the widget tree you should really put them inside on generate method this animation will work still the same but this whole code would just simply not be inside the first page but inside on generate route method present on your material app or Cupertino app all right now all that's left for us to do at least for now is to go over to the second page and we of course need to create the transition animation field over there and we are going to create it so let's say final transition animation actually let's give it a type animation double and let's hit control that or command that on Mac and we are going to generate constructor for final fields and with this we have just gotten rid of the error on the first page because the parameter is already present on the second page constructor and now that we have this transition animation which is of course passed by reference s anything in the art now we are gonna be able to listen to the updates on this transition animation and build our app accordingly in order to slide something or otherwise move something on the screen the most versatile approach we could use here would be to use a transform which would allow for even rotation scaling and whatever you really want even you could do some 3d distortion so transforms are certainly one option to do it but since we are just going to slide something on the screen we may as well use the slide transition instead because it's a bit simpler to use so how can we add some animation here where we first need to wrap the container which we have two instances of one is red and another one is green and they are both in expanded widgets inside a column well we need to wrap this container inside an animated builder which will make sure to rebuild the underlying widget tree every time the value of the animation simply changes so let's wrap this with a widget its name will be animated builder and with this we need to provide an animation which will be the transition animation which as you remember is just passed by reference so it's going to be updated just fine and then we also need to provide a builder method which is where the magic is going to happen this takes in a context and a child and this child parameter is pretty important because as you can see the animated builders child is indeed the red container which we want to animate using children for such builders as the animated builder is a good practice because essentially the child is not going to be rebuilt the only thing which is going to be rebuilt are the widgets which are instantiated inside the Builder method and not the child child is going to be built only once or potentially on its own accord when it tries to set state inside of it and so on but it's not going to be rebuilt every time the animation is updated so again what do we want to use here well we want to use slide transitions so return slide the transition and this takes in a position which is going to be of type animation offset but we do not have an animation offset passed in we have an animation double this is the perfect use case for using a tween so we're going to create tween offset and tweens allow us to smoothly transition between two values just like animation does but what we are allowed to do with twins is essentially change the type which the animation performs its updates on we're going to take a double and use it to drive a tween of offsets so we need to specify the beginning of the tween and since we are working with offsets the beginning will be an offset to you and now what should the initial offset be we need to provide double the X and DUI so the offset on the x-axis and if we take a look at the app which currently of course that's not for it because we have broken the code but this is going to work just fine okay so in the preparation app we can see that we want the red container animate from the right side of the screen so this means that the initial offset needs to be such that this thing the red container will be pushed away from the viewport of the screen to the right so this beginning of the container will be completely and the right side of the screen so how can we do that well we need to set the asset to be one zero I'll explain these values in just a bit so why is it 1 0 the origin of the coordinate space in flatter is 0 0 of course and 0 0 is positioned in the top-left corner right here so this is precisely on the x coordinate at which the left edge of the container is positioned and since we want to move it to the right and the screen has an offset let's say of 1 1 offset is just the full screen in the given axis so that's why we move it to 1 0 1 is for the x axis and on the y axis we want to stay pad so we are now going to move it over there and then the end offset is going to be 0 0 because we want to move it back to the original position without upset but we cannot just provide a tween we need to provide an animation of offset and that precisely what we are going to use the transition animation for so we're going to say tween the animate and transition animation will be the driver of this tween now let's copy this builder and animation from here and we are going to wrap the green container also inside animated builder and let's provide the copied code to the animated builder and of course we want the green container to animate from the left side it so we're going to just set the offset to be minus one and with this done let's see how it looks like we're going to go back to the app let's restore it I guess and let's see how it looks like and it doesn't do absolutely anything which is my mistake because we actually need to provide the child this slight transition the part from position of course the slight transition takes in a child and we need it to be the child which is in this case the container so let's do the same thing a buff provide the child to the slide transition and now when we go over to the emulator we are going to see that the containers are animated independently so we are getting somewhere but they are animated at precisely the same time which is not what we want right we want the animation to be staggered that means that the red container will arrive first and only then the green container will start to animate and arrive as second of course another problem which is kind of obvious is the horrible code duplication because we pretty much have the same widgets here with only minor differences but we have them duplicated we are going to take care of the duplication in just a bit let's for now take a look at how to make the animation staggered because making the red container arrive sooner then the green one is actually quite simple because when you think about it both of the animations are currently completely linear going from 0 to 1 what we want to do instead is to change the curve so that the red animation will arrive at the value one first and only then start changing the value of the green animation as you can see on the charts right now this is achievable by using an interval curve in conjunction with a curved animation which will be driven by our transition animation so we're going to simply cut out the transition animation as it is now and into the animate method of the tween we are going to simply provide a curved animation and this curved animation takes in a curve which will be an interval curve which takes in the starting point so beginning and end in doubles and since we want the red container to animate in first so we wanted to take up the first half of the animation going from 0 to 0.5 and then we also need to provide a parent for the crafts animation which in this case will be the transition animation so basically what we are doing here is taking the transition animation changing its value output in a way that it's going to stop animating when the half time of the animation the original one comes we are doing they're using the interval curve and also craft animation and then we are using this curved animation to drive the tween and this tween in in turn simply provides its values to the slide transition which does its thing while we are at it we can also swap the unexcited a linear nature of our curve with something more exciting for example we are going to use is out cubic curve over here which we can provide to the interval so curve of the interval will be curves is out cubic and again horrible code duplication we are going to copy this curved animation paste it into the green containers to in and we simply need to change the beginning to be 0.5 and the end will be 1 so this animation will take place from the half of the original animation until its end so if we go here navigate back we can immediately see that it's being animated nicely but the code duplication even with just two animated widgets is totally hard to maintain even now and we must get rid of it and we are going to tackle this code duplication with provider with the provider package because we could essentially create just a widget and pass around the transition animation through a bunch of constructors but passing stuff through many constructors is not that great because when you need to change something you need to change a lot of code again so we're going to use provider to mitigate these issues so in order to use provider we need to hop into path spec mo and we are going to add a dependency with pub spec assist extension provider currently it's add version 4.1.2 but what we are about to do here should really work with any kind of a version at least recent ones and also into the future hopefully and as always you can get all of this pub spec ml cover and also the second page the dart code from the link in the video description from the written tutorial inside the first page actually we are now no longer going to just pass the transition animation into the second page through its constructor we are instead going to wrap this inside a provider so let's just return provider we're going to import the provider the dart package and now copy second page and inside the providers create we are going to provide the animation right and the chart of the provider will be second page we could leave it at this but the problem with animations is that they are really just a subclass of a listenable and provider has problems with providing listenable classes in this instance it will be completely fine to use a regular provider but in order not to get errors we need to use a listenable provider instead it just adds a few bells and whistles on top of the regular provider like for example the ability to use consumer and selector widgets just like with a change notifier provider we don't need those bells and whistles right now but we just need to use listenable provider in order not to get any errors and now with this done we can hop into the second page and we are going to simply extract everything down from the animated builder into its own widgets so let's put our cursor on the animated builder let's hit control that or command that in vs code and we are going to say extract widget its name is going to be sliding container okay we pass in the transition animation which we actually don't want to do so let's remove that transition animation argument from there let's scroll down and we're going to get rid of this transition animation but we certainly do want to pass something as the animation into the animated builder so we are going to use provider to obtain animation from the page above so let's say final animation is equal to provider off again let's import provider of animation double and we're going to provide context over there and also specify that we do not want to listen which means that we do not want to simply rebuild the widget tree of the sliding container whenever the value of the animation is updated we are going to rebuild the widget tree using animated dollar instead so let's specify the animation inside the animated builder and now we need to make this sliding container widget a more generic one so that we can use it both for the red container and also the green container so this means that we need to be able to modify the offset also the interval and also the color of the container itself so this means we are going to create a bunch of fields inside of this sliding container so let's say final double initial offset X I'm going to copy this below a bunch of times interval start then interval ends and finally final color color now we're going to hop onto the sliding container constructor add funnel filled formal parameters and now we can use them instead of the hard-coded values so the offset is going to be initial offset X and then 0 the integral curve it's starting point will be interval start and will be interval end let's add a comma here so that it's nicely formatted and lastly the color of the container is also going to be pulled from the field so color alright and again you can get all of this code and also go through this lesson at your own pace from the link in the video description which is going to take you to reso coder comm with this done we can scroll up and yeah here we are already using the sliding container inside expanded which is need to provide the arguments to the constructor and actually let's make those arguments required so add required alright with this done we are now going to get at least a warning here so initial offset X for the red container will be one because again we want it to arrive from the right side of the screen then the interval start will be 0 interval and will be 0.5 and lastly the color let's actually specify it first so that we know what we are talking about in this sliding container will be colors red okay now we can copy this sliding container and replace the contents of this expanded widget okay its color will be green initial offset will be minus one interval star will be 0.5 and its end will be one cool and now we can have into our app possibly hot restarted to apply all of the changes and once we hit the floating action button we can see that the animation is still there it's looking sharp and also we have successfully separated our code into a small widget which is reusable and also main table and again it looks really cool so to go through this tutorial at your own pace once again and to get all of the code check out the written tutorial available from the link in the video description and if you are serious while becoming a great flower developer who can build real apps for clients or at a job go to flutter that education link is also in the video description to get the top curated foreign news and resources aimed at improving your app development career over there you can also subscribe to my mailing list to get the best photo resources delivered weekly right into your inbox and if you don't want to miss more tutorials like this where we deal with these kinds of nice smooth and interesting animations be sure to subscribe to this channel and also join notification squad by hitting the bell button to make sure you grow your floral skills because here on reso core I am determined to the best tutorials and resources so that you will become an in-demand flutter' developer if this video helped you with understanding how to build cross page transitions which are fully custom and staggered give this video while I can also share it with our developers who are surely going to find it beneficial to leave a comment have anything to say and see you in the net [Music]

Channel: Reso Coder

Views: 33,445

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, flutter page transition animation, flutter navigation, flutter navigation animation, flutter transition animation, flutter transitions, flutter transition between pages, flutter custom page transition, flutter animation, flutter animation tutorial, flutter tween, flutter interval, flutter staggered animation

Id: C7CAMPdUu8o

Length: 31min 45sec (1905 seconds)

Published: Tue May 26 2020