Flutter Animation | Introduction to Animations in Flutter

hey hello friends I'm back with a new flutter tutorial and today we're gonna be creating this sort of animated clock in flutter we'll be learning about the basics of animation in flutter using the animation and emission controller and the de tween so it's gonna be a fairly long tutorial and so let's get started okay so now we are in a new flutter project created an inverted studio so I have all the basic structure here with the main dart file open on the right hand side I'll select all the code and except the top two lines I guess okay so I'll delete all the code and so we need to create a new material app and they run app method I'll create a new material app give it a title from my clock with a home home screen okay so now we want to create a home screen class home screen that extends a state full widget in this case we want it to be a stateful widget because we want to use animation in it and animation is sort of revolving around the change in well use so our values will be changing from 0.5 to 5 and the other page that is open needs to reflect the changes to the user so we're going to use a stateful widget so we'll add the overrides so okay so first we want to create a new state for it or create class home screen state that extends states of type home the screen okay so we want to add the alright okay so the home screen is a state full widget and that does return a state from the create state function so for this home screen we want to create a state obviously okay so we create a home's screen state class that extends the state of type home screen and there is the build method a bad method that is mostly in the stateless widget all right so this is the build same build method here okay so in the build method will return a scaffold so in the scaffold we'll add a new app bar app bar and in the title we'll add new text widget and that just says o'clock so at this point nothing interesting is happening and we want to return here the home screen State okay so when I save the application and run it on the emulator you see that there is an error let me see that tag zero in comma X is a procedure a constructor or a function okay I think I need to restart the app once again and here we want to add a new function home screen state super okay please okay okay so now as the app is running there okay so what we want to do is now we want to take this clock to the center at the app bar so that it just becomes like the demo I showed you okay so now in the app bar here it is I'll just wrap the text around the center object so that the text is now in the center of the app bar you can see that right here okay so now I'll add a new I'll change the color of the background first so in the body of the scaffold I'll add a new container so in the container I change the width and height of the container so for the width and media query dot off context dot size dot width okay so this is the way of getting the width of the screen using the media query media query off of the context of this application size dot width in the same way we can get the height of the height of the screen for the container so I'll say height here and in the height change in the container I'll change the height this way so I'll change the background color to okay sorry I'll change the background color to colors that what should I make it I'll make this deep orange and now I want to save it you can see that the whole of the background is of deep orange color the container has filled whole of the screen that is being shown to the user so we want to change the app bar also so in the app bar I'll just add the background color I'll do this below the title so that it looks more organized okay background color colors deep orange and I'll save that okay so now you'll see that there is some sort of elevation a drop down on the airport that is the default way the app bar to the user so we'll make the elevation to zero point zero so basically elevation is the property that that adds that depth that shadow effect to the material widgets so I'll make that zero point zero so that the app the shadow is gone so we have a uniform screen here we have we could have added this claw text other ways without adding this app bar but I sort of thought that this is kind of an easy process we don't need to add the padding from the other widgets so I'm just going with this way okay so in the body I have a container that is this so in the container I'll now be adding a child I'll make this center and in the center I'll be adding another container I'll be adding another column okay so what the idea is that will it will be having this sort of screen and in the center of the screen we'll be adding another container another column so the column will be having two columns one for the clock the digital clock and the bottom column for showing the pendulum okay so in the column I'll add the first child to be a simple material okay in the column I'll add the children property and in the children I'll add the container material sorry material and I'll add the child to material of container okay so why I have have I added this container child to the material so that the material does not have any size of itself so we want to add some sort of width and height to the material and we'll do that using the container and we'll give this container a width of 320 and a height of 320 also so and we'll change the color of the material to colors dr. Brown docked shade 900 okay so this is sort of a way of adding different shades of a single color and most in most of the cases you say that colors yellow colors green brown and all sort of things so when when you you can also add shades to different to the color that you select in this case I say Brown dot so that gives me a number of options that I can choose from so shade 900 cheese hunt shade hundred and there are many other options sheet 200 300 400 and so on so I'll add the shade of 900 here sorry 900 and brown just okay sorry shade 900 okay so when I save this you can see that we have a nice brown colored box below the clock app bar so what we want to do next is we want to round the corners of this box okay so in the material will have the property border radius will add a new border radius or the radius dot all for all sides of the material and here we'll add radius dot circular and we'll add a radius of 50 point zero just so that we have nice clean borders nice rounded borders here so I'll just say that and we'll open so now we have rounded borders for this material and now what we want to do is we want to add some sort of shadow from this brown color to the background so we'll do that using the same property that we used in the app bar will add some elevation to the material and we'll keep this as the boxes of large size so we'll keep this 2022 point zero and we'll save this and now you see that we have a nice shadow but the shadow is quite dull here so I'll just decrease the size of it to 15 15 and save it okay you well that's okay ten okay so we have a my shadow in the background it is quite light but you can just see it barely see it when we'll add other objects it might be more apparent here okay so now we have this sort of material here but what we want to do is we want to add a clock here so I'll add the child to the container I'll add the child and make this text okay so what do we want for the text we want the text to display a string of date will not display the date will display only the hour and the minute minutes of the clock okay so I'll just create a new function here just for the sake of it current time that will return some string of current time so I'll call this so we'll say okay so we'll add date/time dot now dot hours hour and it's our and with a semicolon here and daytime dot now dot minutes okay so I'm basically using this string injection sort of thing here where I just use dollar sign and two curly braces to contain the code that needs to be evaluated before being added to the string okay so I'm using date/time Namur and date/time now that minute to just add the sort of time to the stroma to the string with a colon in between so there is underscore current time the underscore makes this a private function so that this function cannot be used out of this class this is sort of a dart to a dart way for creating private functions okay so now I'll use this function in the text here I'll just pass current time and I'll save this and there is time here just sort of in the upper top left corner this is kind of really small and sign so we'll add some style to the text well add style using text style and here we'll use font size we'll make this quite a bigger 17.0 maybe and color okay I'll use the color will make the color of this colors white and we'll use font weight or a new font weight of bold okay so now when I save this you can see that the time is nice and clean quite too big in size to that it can be easily easily seen so at this time the time is kind of aligned to the top left corner of the box the material box so we'll wrap the text with the new center object Center widget so when I save this you can see that the time is in the center of the material widget so now we come to the main portion of this tutorial when we need to add a pendulum ticking pendulum below the actual time so here what we want to do is in the column where the material ends we want to add another object another widget we want to add a container okay so in the container I'll okay so in the container I'll make the I'll add a new child so this child wood will be an image image dot asset ok so right now we don't have any images in the project so I'll just comment this line out for a second I'll just save the project at its current state and see that everything is working and there is some error that we that there is only one digit being shown here we can fix that but we'll just apply a small patch to just cover this tutorial okay so you can just there is more quote to be written to display the time properly than this single line of code so I think you understand this and you'll just customize this yourself you who want to use this and some sort of application or something so for now we'll add a new image here I'll just comment out all the tests as we're not going to use them right now okay so I'll just add a new folder here in the new on add a new directory now call this images and click ok so now for the images I do have a single pendulum that I sort of design in Photoshop it's not quite the best kind of pendulum in the world so it's it's kind of a no-brainer okay so I'll just copy this and I'll go to the images folder and I'll just paste it so the images now have a pendulum dot PNG I'll go to the pub spec dot yml file sorry not the lock file in the pub spec dot yml file so here I'll just comment uncomment the assets and I'll set the indentation of these so that in the pub spec dot yml file there is a and that the indentation plays a huge role if you just add an extra space the whole file will get get corrupted and the it will show you errors in the run for the Android studio so I'll just use the pendulum dot PNG I'll add that to the assets with a dash and a space images slash pendulum dot PNG I'll save that and thank God it's saved completely and now I'll go to the main dot our file and here I'll click on get dependencies there is no just dependency I just want to clear that upper bar so in the okay so here where we have commented out the images not asset I'll just uncomment that and here I'll add the calf for the image so the path will be pendulum sorry path will be images slash pendulum dot PNG so right now if I save this and I run this on the emulator you can see that the pendulum there is an error with the black and yellow stripes so this states that there is not enough space to display all the assets that are that you want to display on the screen so there is basically lack of space so what we want to do is we want to make the size of this pendulum smaller as when I go to this folder and I check the properties of this pendulum we can see that is sort of off four hundred by eight sixty three dimensions so what we will do is we'll make this sort of sort of rounded figures and we'll make the resolution of the make the resolution of this image assets accordingly well make the width of hundred and let's just assume that the height of the image that we're adding was thousand so basically the resolution of this would become four hundred by thousand so what we'll do is we'll divide that by four and that comes out to be hundred by 250 okay so we'll just keep those round figures in mind and here I just add a height of 250 so now when I save this you can see that the pendulum is nice and small here it sort of completes the space for your images you'll always know they within the height so you'll adjust the width and height of this image asset accordingly I just wanted to use this in my case so I just patched that accordingly and so now what we want to do is we want to add sort of ticking animation to this for that what we'll use the animation so starting with this in the flutter there are three basic things there is animation animation controller and there are a few other objects like tween so animation is basically taking care of only the well views so it knows only the type of animation the the values of the animation that is from 0 to 1 that it takes most of the time so it base it basically takes that value from 0 to 1 most of the times and a type of curve that you want to add it to it for example I'll just create a new animation object here animation I will just call this animation and a new animation controller I'll call this animation controller and the animation controller basically controls the enemy controls the views of this whole state full widget this state according to the animation that we want is the animation object does not itself knows any sort of state of the views in our page that is all sort of controlled by the animation controller in place of the animation so what we'll do is as I go through this lecture you can understand the whole process in a much better way so there whenever you create a new stateful widget you need to create a new state and in a state in each state there is an init function to initialize the state okay so I'll just add above the override I'll add the init function in its State this is also an alright so it does not does need a super method the super method that refers to this state superclass okay so it calls the init state of the super also so in this will create okay in this well initiate the animation controller will create a new any mission story will create a new animation controller okay and the resync will call this so what the we sink is in basically in flutter the frames most flutter apps run at 60 frames per second depending upon the capacity of the device so for each frame their frames redraw 60 times for each second the frames redraw 60 times so this is for an average app running on these modern devices so for an older older device it may be 30 frames or 40 frames a second so we'll take an average app to be a 60 frames per second animation so the we think is required for that it's sort of just some internal processing for a synchronous type of things so we're gonna not gonna go in that okay so well you could see that there is a red line under it so that it does not have any we sync property at this moment because we want to add a width single provider single ticker provider state mixin so this is kind of a mouthful and we want to X and so basically what we're doing is we want a we are making a home screen state that extends the home that extends the state of type home screen that uses single ticker provider state Mixon it's quite math full so quite a mouthful so well you can see that then now we sync error is gone so what we want to add now is want to add a duration sorry we want to add a duration to the animation controller this is basically the duration of animation that you want to run so we'll add a new iteration of seconds maybe well we'll keep this nice and slow for now we'll add five seconds of animation for now and for the controller there is also animation controller dot add listener so this listener will take a new function basically whenever the animation changes there is any change in the animation like for 60 frames per second animation there will be 60 changes approximately 60 changes in a second so that this function will run each time for those 460 times in a second okay so you do not need to do much heavy stuff here and the applications can handle them but it is suggested not to do such kind of stuff here if any calculation can be done prior to it it is most efficient to do static calculations prior to using in this function so there is also another function called animation controller that forward so this is basically the start function for animation controller when you call this function the animation will start ok so right now we'll keep this empty and we'll add set state here okay so what we want to do now is we want to initiate this animation object also so in the build method I call animation is equal to curved animation so what this curved animation will do it does not create any sort of curved curved animation as you may think it just takes a parent that is off that is the animation controller and occur so basically a curve is nothing but how the values in the animation should change okay so for a linear animation the values will change from zero one two three four five six to the infinite value that you want to add like four value from zero to one the values will change from zero to 0.1 0.2 0.3 and so on so for curved animation they will take of a different route okay so they'll be adding in a curved way that will represent a curve on a graph okay so what we want to add here is curves dot elastic in out so this will basically smooth out your animation rather than making it just a linear animation okay I'll show you the difference in real time when we run the app using the animation but for now you can just understand that curves add that's add those smooth effects to the animation like elastic in and elastic out if you have ever used FFX or any other editing program you might already know that what are these curves used for okay so at this point we have an animation object that is being initiated to curve to animation with a parent of animation controller and a curve that is basically smoothing and that will be basically smoothing out the animation and we're using curves that elastic in out so that we have quite smooth in and out of the animation so at this point nothing happens in the animation we're not using any animated well use and so on so what I will do is add animation is equal to tween begin a point - point five and then end of 0.5 so what tween does is tween is basically in in most cases we don't want our animation to range from 0 to 1 you might want that in case of opacity but in most other cases like if we want to transform any object we want to animate the width in height so 0 to 1 well you basically have no use in these cases so between provides us with the ability to add our own values to the animation for example numbers bullying's and doubles and so on so we're adding these two wellies to begin the tween animation from 0.5 value minus 0.5 a negative value and it takes it ends the animation to a value of 0.5 okay so I'll I'll tell you later why we're using these point 5 negative 0.5 and 0.5 but for now just hang with this okay so after creating this treat tween object it prides us with an animate function so in the animate we'll be adding this the same animation object that we're initiating okay so basically we're just updating the animation object with the tween object and then we'll returning this to the animation we're basically updating the animation object okay at this point our animation object is ready and we can use the animation controller okay the animation controller is starting and we have a good clean animation to start okay so now we'll come down to the container here we'll add alignment okay so basically there are two types of alignments one there is simple alignment that you use to align the objects okay alignment that Center top center left center and all these sort of top center or bottom center and all these things and there is fractional offset fractional offset okay so let me tell you the difference between these two okay so when you talk about the alignment the alignment sort of takes for example if this is the container this whole is a container the alignment takes the center that is this this this place as the origin okay so it is not zero zero it is this point here so the alignment aligns object according to this center for the top left being this corner top right being this corner bottom right being this and bottom left doing this okay so you understand this basic concept that alignment uses the center of the container as its starting point so in case of the fractional offset the fractional offset starts at this point the top left corner at the zero zero of the container okay it shifts that center point the zero zero to this point here so how this will help us in this situation is when we set the alignment will change the x value to 0.5 of the current x and the y value to will keep the Y value same because at this point we want the pendulum to be ticking from this point if this is the pendulum let's say if this is the pendulum sorry just this kind of really a rough drawing if this is sort of the pendulum and then this is the center that we want to the pendulum to tick around okay so this kind of really a worst one but for this case I think it's fine okay so we'll go to the offsets and we'll set the DX to be 0.5 and the Y to be zero point zero okay so now when I save this you don't don't see any change in the animation okay in the view because we have not yet animated the object but there is a way to show the alignment so for this I'll just transform this okay so I'll just add the story I'll just add the metrics transform matrix for rotation Z okay so we'll add a rotation of point five point two in this case zero point two okay when I save this it does take some time to reload okay so there is not at all any change in the view so what is happening is that we cannot add direct transformations to the container because we want to animate the container itself the container is containing the image so animating the container won't animate the image we want to animate this whole container okay so you'll basically understand this I'll just save this project here I have cut those lines and I want to wrap this container with a new object called transform okay I think there is a mistake so I'll just go here and in the container I'll wrap with a new widget and I'll call this transform okay so transform widget is basically used to transform the child element okay so we're gonna be trying transforming the container that is further containing the image asset okay so in the transform I'll be adding those both properties called align and transform and when I save this let the hot reload work okay so now you can see that the angle at which the pendulum walls earlier it was kind of a 90-degree angle so it has now changed to point two Radian so you can see what radians are if you don't already okay they're kind of equal and the Radian is the angle at which the circumference the covered arc circumference is equal to the radius of the circle so you can check this online and you can learn more about radians there so we have set this rotation Z to 0.2 Radian okay so this transforms this container containing the image in a way that it is tilted in a way so what we'll use is will use the tween properties the begin and the end with negative 0.5 to 0.5 so what we want to do is we want to animate the transformation of this container from negative point 5 to point 5 and we'll repeat this animation again and again to use this sort of as a ticking for the container so rather than passing a static value what we'll do is we'll pass animation dot value okay so this will take the value of the animation at that point in time and it will animate the object here okay so when I save this you can see that I need to start this again because the init method is already called here so what we want to do is you can see that this was kind of a short animation so why is this happening why isn't the object updating okay so why is this happening you can see that it's sort of updated but it does not did not display any change on the screen so what happens here is you see that in the animation controller we had an ad listener method but what we are not doing anything here so what we want to do is we want to call an empty set state method here and we don't want to do anything so basically this set State method will force the state of the object to change force the whole state of the object to change each frame each per second okay so it will it force the object to update 60 times per second so that it can display the updated animation okay there are many other ways to do this there are special widgets called animated widgets to do this sort of thing where we don't have to update this state manually so we're not going to be going into that because we're discussing the basics of animation so now when we go to this animation and redrawn this let the reload complete and hopefully okay so now we have sort of this sort of elastic animation here you saw that when I run this again as the animation is not repeating so you will see now that there is an elastic animation for the pendulum but what we want to do is now what you want to repeat this animation so what we will do will go to the controller so in the adolescent method above this dead state we want to see that when the animation reaches from negative 0.5 by the way negative 0.5 makes the pendulum come here and the 0.5 makes the pendulum come here so what we want to do is we want to check that if the controller is if the animation is complete then we want to reverse the animation and if the animation is at its starting point again then we want to rerun the animation so what we will do is will come here in the add listener about the set state and here we'll use an animation controller dot sorry if animation controller that is completed then what we want to do is we want to call any mission controller dot reverse okay so else or else if animation controller that is dismissed so what is dismissed does so is dismissed is called when the animation is sort of at the start starting points of its at the beginning of its animation again okay so animation has completed but not yet stopped it is reversed and back to the its current its starting point so what we'll do is we'll call animation controller dot forward okay okay so when I save this and the reloading starts okay so we will need to restart the application again because we have changed the Edit State and okay so now you can see that the pendulum has started sort of ticking it's taking some time because we have used that different curve here so what we want to do is we want to go up to the curve elastic in out we want to change to change this to sort of something simple we'll use bouncing out and we'll see how this goes I'll just run this variation and we'll see what happens let the activity restart okay see that these are different kind of animation types animation curves so we'll use ease in and out these sort of work differently in each program I don't know what okay so this is sort of okay this is a nice feel here so what we want to do is we want to decrease the time of the animation so here in the animation controller the animation is running for five seconds and we want this to change this to one second so that the pendulum ticks each second here and we'll run the animation again run the app again and when the app reloads so you can see that the pendulum is ticking really nicely okay from the center point up here so one thing you can notice here is that the pendulum is not taking it from exactly the center here because there is some gap between the container and the starting of depends on it is not exactly at 0-0 of Y so what we can do is here is instead of passing 0.0 at Y here is your point 0 at Y we want to take this point to here okay so it will keep the DX to be point 5 but will change the Y to point 2 or 0.1 okay so I'll change this point to for now and when I save this I need to start this again okay so point two is seeming to be a bit much so I'll change that to point one and I'll save this okay so now you can see that it is perfect that we can see that the pendulum is sort of ticking from this nail here okay so this is the basic animation that we can do to these do such sort of things there is much more to animation in flutter but these are kind of the basics we basically use an animation controller to control the animation the animation object sort of takes care of the values it does not know anything about the state of the widget it just knows the values that it is being played through okay so we initiate the animation object here in the builder there are many other ways to do this I'm just taking this route basically to explain the basics of animation in flutter okay so we initiate the animation with a curved animation that sort of uses a curve to smooth it out okay so we are using a curved animation and we're passing the parent as an animation controller here to control the animation and further we use in-between to sort of map the values so that we can use other values except 0 to 1 for example we are using minus 0.5 to 0.5 for the radius for the Radian of the angle and we can also use some sort of dimensions like 0 200 if we want to transform container from 0 pixel and 0 pixels 200 pixel and hundred pixels so there are a lot of other users of tween I encourage you to learn more about Tina voter I Oh Docs okay so the tween gives us an animate function that in turn returns an animation okay so we're using this sort of method here okay what we want to do now is as we have ourself a complete animation what we want to do is that we want to change the font office this sort of clock so here we'll do that we'll add a new folder here we'll go to the project we'll call new and we'll create a new directory and I'll just call this fonts in the fonts I do have a few fonts here called Berlin and in the Brillion I'll just copy this Berlin X bold and I'll just copy this from from here and I'll just add them here in the fonts folder in the project directory and I'll just rename this from refactor rename Berlin underscore X underscore balls and I'll save this so now go to the pub spec dot yml file and I just want to uncomment this font section so I'll uncomment this and I'll just set the indentation of the fonts the indentation is sort of an issue it's really an issue when you just mistakenly just change the indentation even by a little bit and the whole app crashes so what we want to do is under the sports section we want to add a font family and fonts underneath it so there are there are always examples in the pub spec top the mo file so that you can look at them and just add your phone's accordingly so at this point I want to add our fonts lie here in the fonts directory so I'll just call this Berlin underscore X underscore balls dot PDF okay so I'll just change the font family from from that to Berlin and I'll save this okay see pub spec file is saved correctly and I'll get dependencies here so that I don't see that how far anymore and now how to use those fonts inside the apps so for this we have theme property here I want to add a comma there and in the team we want to add team data and there the team they does have another property you can see that there are a bunch of properties here what we want to use is we want to use font family and we'll mention Berlin exactly the way that is being mentioned in the pub spec da mo file here Berlin with the capital P and I'll save this and I'll run the app again ok so it does take some time to run and you can see that just a second ok I think that there is some spacing issue because we have increased the size of that object so much so I do is we want to go here down and we won't change this to 60 and I'll save this and you can see that the clock is ticking and basically what happened was that the size of the text increased so much that it wasn't the app wasn't able to display this clock here so the clock in the app bar there written the text in the app bar is sort of really small here so what we want to do is we want to go to the app bar and in the text I want to add some style textile and I'll just add font size of 21 syrup and I'll just save this and see what happens as the upper reloads there is not much difference I'll change that to 32 and I'll save that and yeah the clock is looking really good now clock 17:41 and the clock is ticking so this wraps up this tutorial and we have basically learned how to use the date and time objects in the flutter how to use the transform how to use the alignment in a much better way how to use the animation in the flutter and so we have created this beautiful clock here it's not kind of the most beautiful clock but it does the job for us so I hope you learned a lot in this tutorial and I hope to see you next time until then peace and have a great new year

Channel: RetroPortal Studio

Views: 13,287

Keywords: Flutter, Flutter Animation, Flutter Tutorial, Flutter Course, Flutter Basics, Animations, Android Studio, Best Animation tutorial Flutter, Animation Basics Flutter, Flutter Tween, Tween, Flutter Animation Tutorial, Animations in Flutter, Flutter Tutorial for Beginners, Animation Tutorial Flutter, Easy Flutter Tutorial, flutter tutorial, flutter animation tutorial, flutter ui, flutter tween animation, flutter clock, flutter animated, flutter app development, flutter widgets

Id: Dj4OPwY__Ak

Length: 47min 40sec (2860 seconds)

Published: Mon Dec 31 2018