Flutter Hero Animations - Learn To Easily Displace Widgets From Page to Page Using Hero Animations

hi everyone and welcome to this chapter of flutter animations course in this chapter we're going to quickly talk about hero animations so let me just bring up the example that we're going to develop it's a very simple view as you can see in here there are three people listed on the screen and then we have uh we have like emojis for for them as their photos so we don't have to design any photos in here and then when you tap on any person then this image will flow to the app bar on top the navigation bar and then when you press the back button it just floats back to where it was before so flutter is going to do most of the work for us but we're gonna set up some tweens in here some animation in here to make make the hero animation look a little bit smoother basically so there are some pitfalls with hair animations we're going to talk about in this video but the basic setup is going to be this just list some people in here and tapping and then the details of that person okay so I have a simulator here that shows the completed application and then I have another simulator let me see if I can bring it up here which is the app that we're going to develop and it it basically doesn't have any content as of yet so I'm just gonna hide these and then let's bring out Visual Studio code and in this chapter I did a little bit different because I have already set up our application with a simple scaffold as you can see in here so it's just got a home page and an app bar and that's pretty much it okay so what we're going to do in here and also the code for for this is going to be on GitHub so don't worry about it if you're a little bit worried about where should I get this scaffold application it's on GitHub the link to which you can find at the bottom of this video so let's go ahead and actually Define our persons as you saw let me just bring up the simulator again every person has an emoji which is that person's like Photo and name and age all right so name age and Emoji so let's go ahead and Define those in here so let's create an immutable class I'm just going to say person okay and let's say that this person has name age and Emoji so I'm going to say name age emoji and let's go in here and say final string like this and age I'm just going to change to int all right and um I'm gonna create a Constructor here make this const and let's put curly brackets in here and make all of these required parameters okay so I don't have to explain all of these because this is not a flutter course as I've mentioned before it's a very simple uh structure which you should all know how to set up let's create then three persons and we're going to place them just in a in a global array in here so let's say conspersons or let's call it people and let's see if we can get some suggestion from GitHub co-pilot and unfortunately know oh my God we did get suggestions but these are not the ones I wanted to create oh my gosh okay person I'm gonna say name John all right let's get huckle pilot chill and age 20 and let's say Emoji actually you know what I already have these defined somewhere so I'm gonna I'm gonna place them in here so you can have a look at them as well so there's just some simple people in there John Jane and Jack all right so we have these set up now let's go ahead into our home page and create some sort of a list in here so I'm going to say uh do we have an app bar yeah let's go ahead and say people and let me bring up the simulator as well so right now our app kind of looks like this okay and let's go and create a list view for these so I'm going to say body it's a list View and we're going to say Builder and let's go in here and say item count is people length then we have our item Builder and this Builder we get the index okay so let's say final person is people at that given index all right so a like that return null we added a return for me as well so what I want to do is to return a list tile in here so let's say return a list tile okay and for deleting I mean the leading part we're going to develop soon so let's just do all the rest so let's do the title and subtitle so let's say the title is the person is a text with the person's name like this and then we're going to say subtitle is and we're going to say the age let's go like and say like that and let's say the person person age years old like this okay so how does the app look like now okay we got that working good now uh those parts are ready we just have to then create this thing with the Emoji all right so what I'm going to do is to um create texting here for the leading part so let's say leading is text and let's say it's the person's Emoji so it kind of looks like this but we're gonna increase the font size to 40. all right so let's say I think we should say style and in here we say the font size is 40 like this and now we kind of got this actually not kind of we we got that basically working okay it's just the size difference uh if I increase this one as well a little bit bigger kind of like this then you can see it's pretty much the same okay so now we got it working now let's talk about the hero animations themselves so how do we do this animation going from one screen to the other okay so before we do that let's set up let's set up the actual navigation so I'm gonna create a detail page in here or Details page so we say STL for stateless and say Details page all right and what this Details page needs is a person so as you saw in here we go from the screen to The Details page and this page also wants to know which person it has to render okay so let's say we have a final uh final person person parameter in here and we add it require this person like this okay so let's go ahead and start rendering that person so we say we have a oh a placeholder really so let's say we have a scaffold and like this okay and then we say we have an app bar and an app bar like this and its title is a const text person dot Emoji like this invalid const okay so this can't be a const apparently good invalid constant value oh right okay so like this like this some commas we're missing in here okay so now let's see what we got so if I tap here uh oh right we haven't set up the tap so let's go then back to here where we created the list View and on the list tile we're gonna have a look at the on tap I think there is a property here on tap like this then what we're going to do is to say navigator of context and then we're gonna push the details screen okay so let's see if GitHub co-pilot can complete this for me material page route Builder Details page with that person yeah exactly that's that's what I wanted to do so I'm going to restart the application and this is our app in the iPhone 14 plus okay this the iPhone 14 pro um wait a minute iPhone 14 plus okay I wanted to create a Pro Plus but anyways yeah I don't even know which names they have these days there are so many pros and pluses and Max's that kind of lose track so this is our app anyways okay because I can see that we don't have this detail indicator um by the way we should add that okay so how do we add that by the way let's go to here here sometime let me say trailing and we should add the little arrow forward iOS okay so now we have that so if I tap here then we go to our details screen so we got that part working okay and let's also display the details as you can see in here it says John and 20 years old so let's go ahead into our Details page and add those components so where should we add those though and let's go into the body in here and say body and I usually start with the inner this is one of my tricks I use I don't start with the outer components I usually start with the inner components okay so I say okay I'm on I want a text that says for instance let's go here that says John all right so I say okay um text and then I say is the person's name and I have some style in here okay and let's say the font size is 20 like this and I close it so I get that part working then I say okay but there needs to also be another one which is the age so then I think oh this is kind of a column then I wrap it in a column so it's so much easier to build it from inside out and then I say uh I got the name working so I'm just gonna copy this one and paste it in here and say person and we say a dollar a person age years old all right and let's say the font size for that is 20 as well and let's add a const sized uh box with a height of 20 in between them just for some spacing so let's see how it looks like now there we go okay then I think okay this column let's put it in a center so I say a wrap like this with center and then I can see there's some spacing on top in here as well so let's add a size box on top like this all right so up to this point it's just pretty much uh we're talking about flutter so oh this is the completed application I want this one okay there we go so so up to this point we haven't really done any animations and this is what we're going to take care of now so what I wanted to mention now is hero animations all right so what hero animations are is that if you look at this Emoji it's uh I mean there are lots of things in common between these two screens in that they're displaying like the title the 20 something years old the Emoji and then you go to the next page then you have the same information but they're in different places and sometimes I mean I've worked on on some applications that designers actually have designed something some animation like this that we can see in here where an element from the previous screen flies into the new screen simply because it wants to give you that belonging that you've gone from a context to a new one though you've carried an object with you to the new screen okay and that's sense of belonging that sense of like knowing the context from which you came from is what hero animations do for you so let me bring up the iPad screen to do some recording here and sorry to do some drawing in here let me see if I can bring it up here like this so what we need to do is I'm just going to do some drawing in here so let's say that we have a screen in here which is our first screen and we have three elements in here okay so we have a profile photo but we don't actually have a photo we have an emoji but you kind of get the gist all right and then we have and another screen in here like that which is the app bar and the profile photo in here and the title and a subtitle in here okay so what's going to happen is that the first step that we need to do to get this hero animation working which is this sense of belonging that you go from one screen to the other and this is something to be honest with you that a lot of uh not actually a lot of I think two or three designers that I've worked with at least professionally they've wanted this kind of animation and this wasn't even in flutter this is back in the day when I was actually doing audios development I'm still doing iOS development but this is literally before flutter was even born where designers were expecting this kind of Animation from me to create inside an app that I was working on and so the animation the way it works is that here you're on this screen and let's say on screen one and then you have screen two in here oh my gosh okay like this and you tap on this item which is right here and the first item then what you need to do is to uh um actually before I do that let me just explain how the animation works so you have this photo in here when you go to the next screen there is a default animation that flutter takes care of and this is like your push animation you can see in here you see the push right iOS does it differently from Android and Android does it differently from IOS of course on iOS it's a push on Android it could be like a screen that kind of like Pops from the center of the screen to take the full screen okay uh and this default animation is something that flutter takes care of but your job in here is to ensure that you can Define the animation for this component right here on the left to the component on the right using some sort of an animation object like a tween all right and we're going to create a tween actually Azure associate so given this fly pass the flutter has already taken care of like to push from the left to the right actually the object to the right pushes the item to the left further to the left so that it kind of goes out the screen you can Define your own animation for components that are to be carried from the left screen to the right one okay and we'll we'll talk about that but the easiest way to actually get something going for you to get it working is to first of all wrap all of these components on the left which needs to be flying to the screen on the right inside hero widgets so this one this one and this one wrap them within here widgets Okay add a component on the right hand side also needs to be wrapped inside a hero widget okay so that's step number one now step number two is to Define keys for these now the key is something that tells flutter what to animate and how all right actually not not what's animate and how it's just it tells flutter what a component was carried from the previous screen into the net into the next one and how it kind of needs to match them so let's say that on on this set on the left hand side let's say you give this the key of key one all right and then on this and the title let's say you also want to animate the title and let's say you give the title key to all right and the subtitle you give it the key of key three now on the right hand side you need to ensure that these Keys also match so you give the photo a key one you give this key to and then key three so as long as then the keys match when the one flotter does the default animation for each platform to go from one screen to the other then it will know that oh T1 is is for a widget that is literally here on the left hand side and now so its position was let's say 0 and 0 let's say okay and then it says oh on the next screen key one is for a widget whose position is here kind of in the center of the app bar how should I do the animation then flutter does some default animation says okay I'm gonna I'm gonna go from position zero zero to like 300 and 100 something like that so it does a default animation for you and it does the same thing for all the other hero widgets so it says on the left hand side then I had a key two for a hero widget then it says on the next screen I'm going to find out where that key to resides oh it's right here it finds this position which is right here okay then it does a default animation for that title on subtype I think you get the gist right so given that you need to also have some control over this flight path so this animation that is happening right here I'm drawing a circle around it okay this animation happens right here you actually have control over how it needs to be carried out and that's the third step so step one wrap wrap your widgets within hero Keys step two give them key sorry here widgets route and then give them here are Keys which is kind of like a string for us and step number three which is the most complicated one is actually the fine Air flight pass and you don't have to defy your flight path even with the step one and step two you'll get some default animation but I have to say it doesn't look good okay uh you'll soon see actually how it kind of looks like kind of looks disgusting I shouldn't say it disgusting but I mean it doesn't look so good okay but you get something at least out the box so with this I don't know how much this made sense but let's just go ahead and start implementing something in here so I'm going to get rid of the iPad screen gonna do some moving around here in my office so I can sit in front of my monitor so given that let's just go ahead now actually I'm gonna get rid of this iPad thing that I have it's just glaring into my face a lot but you don't see that so let's go ahead and do our magic so let's go in the first screen and have a look at the component that needs to animate from the first screen into the next one and that one is going to be our uh where is it it's this leading right where we're displaying the Emoji so to take care of step one we're gonna go ahead and wrap this guy within a hero widget so let's say hero and then let's give it a tag and this is like the key I was talking about let's say it's the person's name all right and you can see tag is it's just an object all right that needs to be the same so it has to implement equality and since string already implements equality it's just so much nicer to give person name in here because it's also easier to go here in The Details page and do the same thing for the app bar in here okay so let's say app bar then we are gonna wrap this guy this text also and we're gonna say this is rap with hero and the key yeah sorry yeah the tag is the person's name so we got step one and two working just like that all right so I'm going to bring up our 14 plus I think I think this is our app I believe because if I go here and say people2 then yeah so let's actually keep it as people do so we know the difference so people is the one that has already been implemented and people to this R app okay I'm gonna get rid of this one to be honest with you and change it back to people like this so much nicer so uh now that we have that working let's just see how the default animation looks like you can see now this is already flying over to the new screen you can see in here but there's some sort of like a yellow under underline you can see it here right so it doesn't it doesn't really look that good to be honest so you can see that like it kind of is a very small one when it flies in so um it I mean it doesn't it doesn't look so good so what we could do to go ahead and give this guy a textile and say that okay you're much bigger now all right so we go out and then in oh did I change it on the main screen oh I didn't want to do that okay let's go to The Details page and say that this guy has a text and let's say that it has a style and let's give it a font size of 50. like this I think I think this is a little bit nicer all right so fly in and fly out okay it's a little bit nicer where you can see that yellow thing and for those of us who've been doing flutter development for a while you see if if you're running on an is simulator and if you see that yellow thing and then you know that you don't have all these super widgets on top of this to take care of the styling of your widgets for you so you're kind of like getting a default style and usually people go ahead and wrap this and within material to get this to work fine and this is actually what we're going to do in this example as well but don't worry about all those details we're going to take your room soon so have a look here at I mean usually as I mentioned in the previous videos when I'm doing animations I usually play around a lot with like the results that I'm getting just to understand what is happening so you see a little Emoji in here flies in here looks good but it's just that yellow thing that we can take care of and make it look a little bit better okay so what could we do to fix that so let's go uh in the let's see actually in the first page uh we I think in the first page we're done I think we could just work on the details page right now so let's go in this hero animation that we have in uh in The Details page and the child we're gonna change that so that it has material around it so let's say wrap widget and we say material all right and let's say that it has a color and we say colors transparent like this all right so let's see how it looks like now there we go it looks a lot nicer right like this but you can still see I mean it moves in very nice but it doesn't move out so well and and that's where we need to talk about something called a flight Shuttle Builder okay and this is I mean kind of sounds scary but all it does really it just allows you to control the path of this animation so you can go ahead and say okay but wait a minute when this when this widget moves into a new screen I don't want it to move the way it does I kind of want to get I want to give it like an ease transformation or some sort of scaling and when it moves out I don't want it to look the way it does all right so that you can control using this flight Shuttle Builder all right so let me go ahead in here and say flight Shuttle Builder and you get quite a few parameters in here actually and let me put a comma and in here we're just say say return text hello kind of like this and like this const all right and you see now this hello thing actually let me change that to like a fire Emoji so you see the widget that you return where did the fire go by the way uh fire here okay so this fire emoji that we're producing in here will be did you see that so the beginning and the end are defined by the widgets in each each screen but this fire Emoji is the is or in this widget that you return from the flight Shuttle Builder will be displayed to the user while the animation is happening did you see that boom boom right so why is this useful well in this uh shuttle Builder or in this Builder function you get the direction and also you get the from and two widgets so the from is this guy this is your from widget and the two Widget the two two hero context is this widget so you know from which widget you're going to which and using which direction okay and also you get your context and your animation so you pretty much have like everything you need in order to animate this guy to this guy right so you don't have to like come up with your own widgets in here like a fire text or something okay so the first thing we're gonna do is to say okay uh what we need to do is to go ahead and say switch and switch flight Direction all right and let's get a Visual Studio code to give us the parameters so we say Okay won't be push and then when we pop and this is the push pushing and then popping so then you define your animations in here okay so let's say in this case uh I mean let's see the child okay text material and let's let's remove this material from here uh do I even see to remove this widget yeah so the child is the text all right so we're going to keep the child exactly exactly as it is uh because this child will then be passed to us in the from and the two context the two hero context and from hero context so this is going to be our um widget in here at least this is D2 parameter and the from one is going to be this one all right so what we need to do in here is to go ahead and Define then and do the wrapping of the material and Define our animation based on the direction let's take care of the pop first okay so in the push what I'm going to do is I'm just going to say Return To Hero context widget like this so that's uh when you're pushing you want to go to the widget that you want to go to basically not the from one okay and in the case of puff let's just say from hero context widget all right so that's like the most basic part done right now so let's see the effects so we go here and here so it doesn't look that different but what we want to do is to get rid of first get rid of these yellow things under them okay so let's wrap both of these and within um material so wrap material material and then we say the color is colors transparent like this and I'm going to wrap the same wrap this widget within material as well material like this and let's say it is transparent so now if we run this application you can see we successfully got rid of those yellow things that were appearing under okay what we need to do then is for the pop I mean the Pop animation looks kind of fine you see right but for the push let's just go ahead and add a scale transition okay so a scale transition is uh at the moment you see this child is we're just returning the widget that we're transitioning to but a scale transition is its own widget so it allows you to scale a widget and given some animation basically so let's say that we wrap this guy within a scale transition all right like this and you can see it's complaining now it says the scaling is not provided and you see it's an animation all right and we already know how tween works so let's say we want to scale this guy from zero to one so let's say we say tween and let's see oh right I mean we can't just say tween simply because um those are not really animations what we need to take is this animation right here because you see you get the end the default anime because you see flutter is doing an animation for you so you need to hang on to it so if you're adding more animation you need to add it on top of this so let's say we anim we say animation and we drive it okay then in here we can add more stuff all right so let's say we want to take a tween that is from double and that is double and we say it begins with zero okay and we say it ends with one and and this is our scaling basil so we want to scale from zero to one so we kind of want to do a pop uh scale all right now that we have that we want to chain this guy and give it some curve so we don't want to just to go linear zero to one all right uh and we want to actually give it a curve which is called Fast out slow in and it is difficult kind of to draw fast out slow in but I'm gonna just show you what I mean by drawing some things on the screen so so I'm going to bring the iPad screen in here and explain a little bit what uh like these linear animations uh compared to our curve how they work so let's say we want to talk about linear animation first so if I draw this chart in here and then we say on the x-axis we have a time all right we have time and it goes from zero to one okay that's the end of time and then we have scaling here scale and then we have one on top as well in a linear scaling when you go from zero to one without actually giving it a curve then your scaling happens like this so it's a very boring scale okay it's literally zero to one and in on your scale of time and it literally just increases okay however if you want to give it some sort of an animation which we're going to give it called Fast out slow in so let me see if I can erase this okay so fast out it kind of tells you that the scaling happens fast in the beginning okay so it could be that it goes up like this and then it kind of goes like this and then slow in could be kind of like this all right I'm kind of making this one up to be honest with you but there's really good documentation for these things like Fast out slow in uh and slow and and like fast in slow out all of these like combinations they're hun I think they're like hundreds of them available you can see them on flutters documentations website and they've actually written these like they've created animations for these animations so you can see them with examples and the actual uh actual like uh chart that I'm drawing in here you can also see on their website so go ahead and have a look at those uh if you haven't already from the previous example so this is what we're gonna do we're going to give it like a tween we're going to say go and scale this uh widget from 0 to 1 but give it a good and nice uh tween or a curve and the way to do that and we've already done this before is that we're going to chain this and we're going to say chain this one with a curve tween okay and we say the curve is going to be curves fast out slow in and then we're going to just add some commas in here like that I think it's pretty nice so I'm just gonna then how to restart our application let's go to the simulator let's see how it looks like boom and boom there we go so now that animation is happening for you I mean you can't really see the scaling that much but if you scale it to 100 you could perhaps see the difference so did you see it it's horrible but you can at least see that it is happening all right so this this part is completely up to you how you want to do the animation going from uh the from to the two widgets all right and that was really it I mean hero animations are not that difficult to implement they kind of sound a little bit exotic because of the name perhaps but there's nothing special about them it just takes one widget from one screen to the next one and you can Define how they are animating I hope that you enjoyed this video and see you in the next one

Channel: Vandad Nahavandipoor

Views: 8,286

Keywords:

Id: phDN6mBwS8o

Length: 31min 43sec (1903 seconds)

Published: Thu Feb 16 2023