Flutter Animation that Hovers?

[Music] this video is brought to you by design to flutter the platform that improves your flutter coding skills by building real projects in this video i'm going to show you to turn your boring login page to an amazing one using hovering animations wow this is part of the ui challenge that can be found in the design to flutter sub reddit you can follow along in this video by downloading the starter project link in the description so let's get started i'm going to show you on how to make a hovering animation with the current image only you can try out the rest of the challenge yourself i believe it's simple and straight forward so let's create a top section of our page which consists of a couple of widgets so to get the background started we need to have a container with a linear gradient and then we are going to add in our scaffold widget and then we will have a column layout widget that has the padding for the phone's interface and the image as well that we're going to animate so let's add all of these widgets together and it will look something like this so you can see that our image is on the left not centered why is that so if you open up the toggle debug painting you could see that the column over here is only restricted to the size of the image so we want our column to be as big as possible so what we can do is have a sized box with a width of double infinity so with this size box it allows us to center our widget in our column so let's add our sized box so in our column we are going to wrap it with a sized box and then with the width of the double dot infinity and now if you were to save this you could see that our image is now centered so the next part is we're going to create animation so in flutter to create an animation we need an animation object and also an animation controller so i'm going to briefly explain what this animation and animation controller are so animation holds a formation of an animation whether you have the information that is going to start stop moving forward or in reverse while animation controller lets you perform tasks such as starting an animation or in flutter we call it forward the animation or stopping and animation so now let's create a simple stateful widget with the animation and animation controller so luckily in vs code we have the shortcut to create a flutter widget with animation controller let's name it animated image and since we are in our null safe we are going to add the late keyword in our animation controller so in this shortcut we already have our animation controller now we are going to create another variable that is called animation as such so the thing is we do not have to initialize it so we can just remove the init state and then we can just initialize it using the late keyword so we're going to make this animation controller its own variable and now we're going to assign it to an animation controller object so the vsync will be this widget and then for this animation controller we can control the duration so let's add in a duration of 3 seconds so for this animation we need to add in a type so this type can be integers colors and whatnot however we are going to change our image position so to change an image or widget position we are going to make use of this thing called the offset so offset is simply a position so for offset in flutter it's according to cartesian space so this is not your normal graph where the origin is in the middle but for the origin of a widget it is at the top left so your offset position is currently zero zero if i were to make my y axis which is basically the yellow color into one so it moves one of its height so one of the offset text widget height down below now if you were to increase the x-axis which is represented by the white line then it will move one width of the text widget to the right so now if you were to put no x and y axis to 1 and 1 then the widget will be diagonally to the bottom but we just want to move it up and down so we're going to make use of the y-axis only or basically the second number however we're not going to make use of the value 1 because it will be too large so we're going to make it into a fraction maybe 0.08 so inside our animation here first we need to set the type 2 and offset and then we are going to assign not to an animation but to a twin so for those who don't know what a twin is basically it is a short form for between so like i said earlier an animation or a twin an object that holds information on when your animation begins and when your animation ends so for this we are going to begin with the offset 0 and then we're going to end it at our y axis or at the bottom but eight percent of its height now the thing about the twin is that it allows us to animate our animation controller so we can make use of this animate method so our parent animation controller is called controller so let's add that now the next thing is we need a widget that allows us to slide the image from top to bottom so there is a pre-built widget that allows us to get the animation and animate accordingly so what we can do is we can make use of this thing called the slide transition so it is a widget that animates the position of a widget relative to its normal position so let's add that so instead of a container we are going to add a slide transition and then we are going to add in the image of our rocket person however it requires a position parameter which is basically the animation that we have created so let's add in the position parameter with the animation object over here and now if you were to save this nothing really happens because we have not added the animated image inside our column so we can remove our image as set over here and add in the animated image widget and now if we were to save this nothing really happens so this is because our animation controller over here and our animation is being created but not being started so what we can do is we can start the animation but the thing is we want this to continually repeat its animation so what we can do is we can make use of this thing in our animation controller called repeat so repeat basically repeats the animation however at the same time if you were to save this you could see that our image is now going down but it will just teleport to the top which is pretty ugly so is there a way for us to actually when it goes to the bottom it just reverse its direction and go to the top well there is so we can actually input the reverse property to true and now if we were to save this let's see if it works so it's still bopping up and down but we need to restart the app because our animation is in a stateful widget all right now it's actually bopping up and down smoothly and less awkwardly so the next thing is that we want to actually separate the clouds from the rocket person in the image so how do we do that well we can separate it by manually separating it so what i can do is i can open the images of the person on rocket png and then i just copy and paste two times and the first one will be the clouds and the second one will be the rocket person and now let's go to the clouds and for a mac you're able to crop out using this markup feature so what i can do is i can just use this lasso selection and select the rocket person and then delete it now we are left with the clouds the next thing that i want to remove is the clouds from the personal rocket image so same thing with the markup i can just select the lasso and select the clouds and delete them accordingly and make sure you delete both of the clouds and now you can save this now we have images of the clouds and the rocket person if you change the image to a rocket person you could see that the image that's moving or animated does not have the clouds so how do we add the clouds as the background of this current animated widget so we can make use of stack so let's wrap this with a column and change the column to a stack so that's my shortcut and the next thing is we're just going to add the image assets of the clouds as such and now if you were to save this you could see that the clouds are static while the rocket person is just moving up and down now the thing is the animation is pretty bland meaning that it is just moving at a constant speed up and down but we want to add some flavor so how do we add some flavor to our animation well we can use this thing called curved animation so curve animation definition is where you apply a curve to another animation doesn't really say anything but it actually applies a flavor to your animation so what do i mean by flavors so inside flutter it has a pre-built curves class where it contains the different curves of an animation so you have like curves of bounce in you got curve for bouncing and out but we are looking for something that mimics a floating object which i believe it is is in and out so how do we see if something is floating we can see at this translation over here where there is this object and then you can see that it's just going up so how do we add this curved animation into our animated image well what we can do is inside our animation over here instead of using animate to a controller we can animate a curved animation as such and these require a parent and a curve so the parent that we have used earlier is the controller so you can just put in the controller and then for the curve you can add in these curves ease in and out and now if you were to save this and then restart this whole app let's see how the image will actually hover so it actually slows down when it reaches to the top and it accelerates from its beginning to the end so this really mimics how a floating object or flying floating object should behave and that's about it this is how you make a simple login page much better well it is pretty simple but this is how you create a hovering animation for a certain widget in your flutter project so in summary we learned a couple of things on creating an animations so the first one is animation itself second is animation controller third is the curved animation to give flavor to our animation and fourth is the offset that's basically the position of the widgets in a mobile screen and lastly there is a widget that allows us to combine all of this to move our widget which is the slide transition widget so if you like this video give it a thumbs up and if you want more of this kind of video subscribe down below and comment down if you want more any animations that can make any of your screens amazing that's it stay safe and all the best bye bye

Channel: Learn App Code

Views: 47,630

Keywords: flutter, learn flutter, learn flutter code, flutter code

Id: XIcS70JcNa4

Length: 12min 29sec (749 seconds)

Published: Wed Apr 28 2021