Flutter Animation Basic Course - Beginners Tutorial

[Music] foreign [Music] and I am a flutter developer with experience of more than three years in this video we will talk about flutter animations and eye-catching UI without using any packages or dependencies we will work with basic widgets that are available also we will learn how to use buttons asset images beautiful and simple animations textiles shadows and much more further we will learn how to create functions and how can we Implement them so without any further delays let's jump into Android Studio let's assume that you know how to create a flutter project so I have already created my photo project name discover animals I have included some necessary files that we will use in this project this include assets Assets in assets folder we have images different images of animals that we will use in our project also in lib directory I have created a directory name utilities and inside this there is a DOT file named app colors which includes all the colors that we will use majorly in our app for that let's see what is in the main dot dot file when we create a new project in flutter so it includes a random code and if we run this application we will see a simple text in the middle of the screen and a floating action button and that way we can press enter to increment the values we don't need this code we will remove all the unnecessary code from this file and we will remove my home page because we are not going to use it we will create our own widget called card View let's just put it there we will create it later let's remove the title and name it flutter animation tutorial so let's create a new directory inside lib we will name this directory as components inside components directory we will create a new DOT file that will be named as card view inside that card view we will design a card that we are going to show on the main screen so let's just create a stateful widget here we will name this widget as card view as we have named it before uh just import material.dot so that all the error will be removed now we will remove the placeholder and place a scaffold there we will give a background color to it uh let's give it a custom light gray color as you can see we have yellow lines if we have to put constant before scaffold now we have to import a card view the error is gone in Pub spec yaml we have to import assets assets that we have included in our main directory let's uncomment these lines remove hash before assets and also let's uncomment this give it a space indentation is very important in Pub spec EML file let's replace its assets and give it a forward slash and remove the remaining data we have we can name different images like image one dot PNG but if we put a forward slash it will consider all the images that are present in asset folder let's run our project it will run in a moment take some time while building the project first time so we have to wait and let's and there it is we have our project uh it's a simple background Uh custom color gray light gray and we have a debug Banner as you can see at the top of the screen we can remove this debug Banner debug show check mode Banner we have to set it to false and there you can see the banner is removed so in the upcoming videos we will create this beautiful and simple UI first let's create the background card with linear gradient and we will give it some Shadow so it looks more elegant so we cleaned our code in the last video and now we will focus on the components that we will draw so we have a scaffold to which we have given custom light gray color we will use body to display the main or primary content in the scaffold it is below the app bar so in our case we do not need any app we will work with the body so in body we will pass the size box with a width of 330 and we will give it a height of let's say 507 um so we have drawn the size box that we need um the exact height and width we have mentioned above uh so every widget in sweater has a child uh in this case we will use a container because we want to give a circular radius and also give a linear gradient okay so we have to remove the constant from the scaffold because we are going to use container for we will now give it a decoration box decoration in box decoration there are several things we can give it a gradient we give it a border we give it a border radio in our case we will use border radius because we want to give a circular field to our cord on the edges so we will give it body radius dot circular of 40 40 it will make a card circular on the edges on to the next step we will use gradient gradient to give different colors we can give a different types of gradient but we will use linear gradient in colors we have to pass set of colors that we want to use we can use a single color but it doesn't any make any effect if we use a single color so in gradients we have to use more than single color so it can appear on the screen um so uh in our case we will use three different colors uh we will use a custom dark blue we will use custom blue light and we will use custom medium blue color uh so it looks more elegant and we can see a more Progressive transition between two or more colors uh along a straight line uh so I mentioned our colors and if we reload our project we can see that the card is in the top left corner of our Mobile screen so we will wrap a size box in a center widget so it will align our card in the center of our screen um so what do we need now is we do not want our gradient colors from left to right what we want is we want it from a top to bottom so the colors are aligned from a top then Center and then bottom uh so there are two parameters that we can use uh in gradient that are begin and end so in begin we will use alignment dot top Center so the colors will start from the center of the card at the top and in the end we will give it alignment dot bottom center so it finishes at the bottom and in the center of the card so if we refresh the screen we can see that now our colors I learned from top to bottom which looks more beautiful than it looked from left to right so what we need now is we need to add a shadow to our card so for that purpose we have to wrap our code inside a stack we will wrap it inside a column and then rename it to stack so that all container is inside the children with it it's a easy way to do it we can do it step by step or we can do it like that so we have to use a container another container in this we will use decoration and give it a box station just like the same previous container that we designed we will give it a border radius border radius or dot circular and we will give it a 40 because we want it like the same as we have our previous card so now we will give it a gradient we will use this time we will use only two colors in the gradient we will use the linear gradient and we will provide the colors as we previously know that we we need an array for gradient colors because we are using more than one color so we are using custom blue light and Custom medium blue let's say yes we will use custom medium blue so as we have used linear gradient before so we know that we have to align colors uh that we have to define the beginning and the end point so in this case uh by default it defines from left to right but we will Define ah the beginning from as in our previous container from Top Center beginning will be alignment dot top Center and for the bottom it will be same as before we will use alignment and we will use alignment alignment Dot bottom center um so what do we need now we need to give a shadow to our card for that purpose we can use an argument of the decoration that we are using box decoration box shadow inbox Shadow uh it requires an array in which we have to provide the Box shadow box Shadow includes color we will give it a color of custom dark blue and we can set the offset of the Shadow we will use offset and so offset requires two inputs we will give it x axis 0 and for y axis we will give it a 12. so after reloading we can see on the screen that there is a beautiful Shadow underneath our card and I don't think we need this linear gradient let's remove it and reload the project yes I would not need this linear gradient only box Shadow will work so let's give another Shadow to the bottom of our card for that purpose we will again pass a box Shadow for this this time we will use color custom blue light with opacity of 0.85 as far as the offset goes for offset this time we will give it x axis zero and for y axis we'll give it a 3. as you can see there is a error for this we have to remove this constant at the top and then add constant at the remaining yellow warnings if we reload our project you can see there is a beautiful small line of custom blue light color that we can see now that we can see at the bottom of the card so this is our main card view file there is going to be a lot of code in here so let's uh refactor this code and extract some widgets out of this file so after when our project is completed easy for us to read so we will name this new widget card View Window by default it will show this widget at the bottom of our file but we will cut it from here and in the components we will make another file another dot file and give it a name of card view Shadow and place that code inside this file and now we remove this errors we have to import the material Library by importing the material Library most of the errors will be resolved but for this colors we have to import air filter's files now all the errors are removed let's go to the card view file and import the card view Shadow let's add the constant to remove this warning and if we reload our project you can see that the reload is complete and it the the screen looks exactly the same so our code is working so we are done with our card View background and it looks fantastic so let's move to other items that are on our card first we will code this text View at the top and step by step we will go through all the components so we are going to draw all the elements in a vertical view on our card so for that purpose we will use column and inside column we will pass children and inside children we will use text widget and inside text widget we will pass animal as a dummy text and if we reload our code you can see that we can see animal but at the left top left corner of our card and out of the card View and it also looks very small uh so first design we will style this text and after that we will uh bother about the positioning so first of all let's add a style to this text inside style we have to pass textile and here we will we can Define font weight for font weight we are going to use it bold and if we reload our code and if we do the indentation right then we can see that our animal text is bold now now further we can increase the size of this text for font size let's say we will use 52 52 phone and if we reload you can see that it's almost exactly at the position where we want it but it in it is in a black color so let's change the color and we will give it a custom color white and if we reload our project you can see that the text color has been changed but the positioning of the text is not right to resolve this issue we can use padding in this case we can wrap our text inside padding only and make it work but we have to do it for all the components inside the column separately to save our time and make our code more reliable a we will wrap our column inside padding by default in padding the padding is given from all side of 8 pixels but we will in our case we will use symmetric padding in symmetric we have two options horizontal we will give it a 25 and and for vertical we will give it a 5. I have to remove uh these yellow warnings uh let's add constant at the start of our padding widget so if we reload our project you can see that the text is now perfectly aligned where we want our text so let's move on to the next components that we want to design so under the title text there is a subtitle text for this purpose we will use another text widget I have already copied the line and mentioned some text something about animals for textile we will give this a font style of italic so it looks more elegant let's change the color of this text now now for color we will again use custom color white and if we reload our project then you can see that now our text in is in white as you can see that our description text is not in alignment without title text to resolve this issue we can give it a text alignment uh if we set our text alignment to the left and reload our code the text should change but it does not change for this we can use cross axis alignment of our column and set it to start and if we reload our project again we can see that our description text is not perfectly aligned under our title text so moving on to the next component there is a circle in the center of our card we will focus on the animations later let's draw let's draw the basic Image First for this purpose we will use image dot asset widget in flutter inside this we will we will provide the path of our image we have all the images in our assets directory and we will give the image name when we use an asset image we can't use constant because we were using constant at the top of our widget tree so if we reload our project yes you can see that there is a image of a baby elephant in the center of our screen so now we will comment this image dot asset line because our main focus is to code a container in the center of this card view for this purpose we will use container and give it a width of 300 and a height of 300 and we will use decoration and inside box decoration the shape of the container we want it box shape we wanted box shape dot Circle and if we reload our project now firstly we have to remove this error because we are using container and at the start of a widget tree we have constant uh to remove These Warnings we have to const we add constant at the start of the arrow lines and now if we reload our project you can see that there is nothing to show so let's give it a color we will give it a custom color white and now if we reload our project again there you can see there is a circle right in the center of our card view so first of all all we need is to remove this color and after that we have to give gradient to this container for gradient we will use a linear gradient as we have done before we have to pass array of colors which we want for this purpose we will be using colors dot blue with shade of 500 after null safety update inverter we have to add exclamation mark at the end of color value when we whenever we are using shared value and as far as the second color goes we will be using colors.purple with the shade value of 300 now we have have to remove this constant from box decoration to get rid of this error now if we have organized our code and reload our project you can see that the colors are perfectly aligned inside the circle now what we need is we need to add image in front of the circle for that purpose we will wrap this container inside column and rename it to stack as we want to fill the whole space in the stack we will use the widget position dot fill and inside position dot fill child widget we will pass the same image asset widget with the same path of our asset image and now if we reload our project you can see that the picture is perfectly aligned inside the circle so image is perfectly aligned inside the circle but the circle is not in the center of our card to resolve this weekend wrap or text widget inside a padding widget and we will give it a padding only to the bottom of 32 pixels now if we reload our project you can see that the circle is right in the center of the card in inside this container we are going to animate the color so there will be a lot of code so to make a code more readable we can extract this flutter widget and we will give it a name of custom Circle View now if by refactoring this code we make it easy for us so that after we want to make any changes we can easily open the file and we can replace the code for this purpose we in the components a directory we will create a new dart file with the name of custom Circle A View and inside this file we will place that code and to get rid of this get rid of these errors we have to import material Library so all the errors are gone in this file so let's get back to card view file and import custom Circle view here let's add cost constant in the start to remove These Warnings uh so now let's move to custom Circle view file so first of all we have to convert this stateless widget into State full widget because we are going to change State uh when we are animating our colors we have to extend our state class with single ticker provider State mixing uh even uh we are not animating uh the colors we are only using the duration we have to add this sticker provider now we are we are going to define the variables first we will Define animation controller and we are not going to initialize this now so for that because we are going to use late in the start of a variable declaration and second variable will be a Boolean with the name of underscore is animated gradient and we will set you to false now we have to override or init State function basically you need State function what it does is whenever this widget will be called the code inside the init State widget will be run first we'll run first and now inside the State we have to override the super dot in its state function and after that we will initialize our animation controller and in inside animation controller We sync we are going to pass this that represents this state class ticker provider there through which we extended our class at the top now after that we are going to pass the duration after the duration here represents that after how much time we want to animate so here we will pass a duration of one second uh that means we want to animate our colors after every uh one second and now we will add a list by adding listener uh after every one second we can trigger our animation controller and do some functionality with it so for that purpose we have to use set State a set state is basically used when we want to change the state or some variable or a widget so in our case what we are going to do is we are going to use the animation controller dot value and check if the value is less than 0.5 if the value is less than 0.5 then automatically for the variable is animated gradient the True Value uh will be declared and now what we want to do is we want to repeat this step after after every one second so for that purpose we are going to use any Mission controller dot repeat and inside repeat we are going to use reverse and set it to true as to now we have initialized our animation controller but what uh if we change our screen or if we uh change a widget for that purpose we are going to override another method uh with the name of this pose and inside uh dispose we will call the super dot dispose first and after that uh we will do the animation controller Dot dispose which will delete our animation controller we will make the container to animate just like in the sample video the colors inside the container is animating after a few seconds and after that we will put the image in front of the circle and then we will move towards the bubbles that are animating so without any further delay what we want here we want to replace that code and in in child we will pass animated Builder animated builder takes two properties first one is the animation that represents the controller and we will put our controller animation controller and second one is the Builder which also takes two properties a first one will be the context that will be of widget and second one is the child and let's put a comma at the end of our curly basis and indent or code now in the curly braces we will return a decoration box ah inside decoration box uh they we will provide the Box decoration uh this one is the same as for a simple container inside this we can provide the gradient or the shape of the container first of all we will give it a shape we will give it a shape box shape dot Circle so this will give a container a circled shape because we have removed our previous code in order to check that our code is working let's give a color a custom color white and now if we reload our project you can see that the gradient is removed and the white color is given to the container so let's give it a gradient now for linear gradient we will provide a list of colors as we have done in our previous steps for this purpose we will use colors.blue and give it a shade of 500 and as far as the second color goes we will use colors dot purple with a shade of 300 and we will put exclamation mark at the end of the shade value I have explained this in the previous video you can go and check this why are we using exclamation mark and now after providing the Colors Let's reload our project as you can see that the gradient is working fine but what we want to do is we want to animate these colors uh so for that purpose we will use begin and inside begin we will use our variable that we have defined before is animated gradient and if the is animated gradient is true we want to align a color at the top left and if it is false we want it to align at the bottom left alignment dot bottom left now a same goes for the end of the colors for end we will check if the is animated gradient is true then we set it as the bottom alignment dot bottom right and if the animated gradient is false then we will set it equal to alignment dot top right uh now after setting the alignment dot top right and if we rearrange our code and then if we reload our project you can see that the colors are animating after every one second but we have provided only two colors for linear gradient so it doesn't look much beautiful uh to make it more aesthetic we can give it a third color with colors dot white and now look after the reload the gradient is looking uh more elegant so after that now we will start working on bubbles the bubbles that are animating on the screen for this purpose let's comment a code for the image that we are showing on the container so we can easily see the changes while we are coding what we want to achieve is we want to show bubbles throughout the container that will move forward and backward so for that purpose let's take a look on the sample video like in this video as you can see that the bubbles are moving from one side to another side and repeating their formation so what we want to do is uh first of all we would wrap our animation Builder inside a stack for that we can take the easy approach and first step into a column and then rename our column into a stack so now and if we have to wrap the animation Builder inside a position dot field so it covers the whole Space inside or size box now as you can see after reloading our code is working fine after that uh let's put a comment here here we will show the bubbles View so for a bubble's view file there will be a lot of code so let's create a new file inside the components here in the components let's create a new dart file with the name of a bubble view animation so inside this file we will use stateful widget for this we can if we type stf it will give us a option to create the stateful widget and we will name it as a bubble view animation to remove the errors we will import material library and now as we did in the custom Circle view we extended the class with a single ticker provider State mixer we will do the same in this case we will extend our class with ticker provider State mixing so now let's create the methods first we are going to use first of all uh we want to get the random number of circles on the screen when we are trying to animate them for that purpose we will use random library that is a part of a dartmath library now if we use its method dot next int and provide a digit inside it for example if you provide a 7. then it will return a integer between 0 to 6. so the number of circles on the screen will be between 0 to 6 and after that we will initialize a Boolean with the name of his animating and we will set it to false and now we will create a method in which we will Define the coordinates of the bubbles that are moving on the screen for this purpose we will use a return type double and we will name our function a random coordinate let's remove it and set of spelling we will use random coordinate and we will use a double value of a container size as a parameter double container size and we will return a double value for this we will use at random random dot next Double we are not going to use integer in case because we are returning a double value so let's replace it with next Double and we will multiply it with the container size that we are getting in the parameters above so after this method what we do is we will replace or placeholder code with a size box of width 300 and height of 300 and for the child we will use a stack widget and the for the children of Stack widget we will use a list dot generate and we will return animated a position a widget inside animated position widget we will give a duration of uh 2000 milliseconds which is equal to 2 seconds and for the child we will use animated opacity and for the animated opacity it goes the same we will use the same duration of 2000 millisecond and for opacity uh the we have defined a variable above with the name of is animating if is in mating is true then we will give a opacity of 0.25 and if it is false we will give we will give a value of 0.0 now uh let's remove the yellow warnings by adding constant and instead of length we will use here the random Circle the method we used above that that was giving us a value between 0 to 6. let's add a return in the start of animated position widget for animating or bubbles we will give it a curve we will use curves dot is in out now for the animated position widget we will Define the left and the top from where all bubbles will generate so now uh for the left we will check if the is animating variable is true if it is true then we will use a random coordinate method that we have defined above which take a container size of value of the type double so now what we do is we will give it the width of a media query and minus the random size that we are generating above and if the value of the is animating is false then we will give the total 300 width that we have of our size box and divide it by 2. same uh code we will use for the top and replace this left with the top what it will do is uh it will generate bubbles by giving a space of uh 150 if it is false from the left and 150 from the top now what it will do is it will stretch our bubbles throughout the container now for the animated opacity we will give it a child animated container with a duration of same as we given above or 2000 milliseconds animated container is representing the bubbles that are going to be shown on the screen for their width we will use is animating variable if it's true then we'll give it a random size if it's not we will set the width equal to zero and same goes for the height if the is animating is true we will provide the random size as 0.0 now for the child uh we will pass a simple container and inside container we will give a decoration box decoration and we will firstly give a shape to our bubbles we will use box shape dot Circle and after that we will define the color that will give to our bubbles which will be custom color white so let's remove the warnings uh by adding the constant at the start of box decoration so that's it for now in the next video we will Define a method in which we will trigger or is animating variable and set its value to true or false so that after some duration a bubble animation can repeat itself so for that purpose what we will do is we will create a method with a return type of void and we will name this method as start animating and inside this function we will change uh is animating variable to true because we want to set our bubbles to animate and after that we will use a method named as future dot delayed what this method will do is after some duration in our case we will pass 2000 milliseconds or 2 seconds we can set the state of or is animating variable so basically what we want to do is we want to animate our variables then after two seconds we will stop them and after that it will again we will use the recursive programming technique and we will call the start animating function inside itself so that the bubbles will repeatedly animate from one place to another place so after that what we will do is we will create a init State method and inside this method we call the start animating function so whenever this widget is called you can see that the bubbles will animate on the screen so after restarting our app so the bubbles are not animating we have to call or bubble View and bubble animation view here and so after calling the bubble animation view if we restart our application uh wait for a moment you can see that the bubbles will start animating on the screen so this is a success for us as the purpose are animating slowly uh they are changing their place and also they are changing their size now what we will do is we will comment this code and we will try uh to change our animal name above and the detail in the subtitles about the animals with the images so after creating a methods we will create a button at the bottom of the circular view so whenever we click on that button the images will change so first of all let's uncomment a code for image dot asset it will show a red warning because we are using constant in the start of a widget tree let's remove the all these yellow mornings by adding constant in the start of every widget so now what we want to do is we will I have some data two lists first list contains the data of animal names and second list contains details about the animals so what we will do is we will create a function before that we will initialize a variable named image number with one and also we will initialize our list of integers with the name generated number and for the start we will take an empty list now we will create a method named a random number inside this what we will do is uh first of all we will check if the generated number list length is equal to 5 then we will clear all this uh what we will do is now we will use a do while loop before that let's initialize uh let's declare another variable with the name of random number and inside uh do we will set this random number equal to a random dot next int 5 which will generate numbers from 0 to 4 then we will increment it by one so now in while a condition we will check that if the generated number dot contains uh this number the random number that we have generated above if the random number is not already in the generated number list then what we will do is we will set our image number equal to random number and also we will add it to generated number list so first of all let's add it to generated number list and then we will set state of a variable of image number and set it equal to random number and so for now we have created our method a random number that will generate a random number that is not used before and set it equal to our image number so now we have used uh in image.asset uh or path of the image and I have named all the images in such a way that there is image then Dash and then a number so we will replace that number with the image number that we will randomly generate so in this case uh we are not we haven't called the function but we have set our image number in the initialization equal to one so when we reload our code we will see the image one that is of elephant so now what we will do is uh we have to make the name of the animal and the details of the element also Dynamic so for that purpose let's remove this animal and at this uh Place let's a add animal details let's copy it from here and now we will replace this animal with animal details so what we we will do is here we have to provide the index of the value which we are trying to call so we will use our image number and we will decrement it by one because the values inside the lists are stored uh from the zeroth index uh onwards so now if we reload our project uh you can see that we have mistakenly provided animal details uh we had to provide animals list in the title view so let's replace it with animals and reload our code now you can see that we can see the exact same animal name that is in the picture so now for the details of the animals let's use animal details list here and in the index we will do the same we will use the image number and we will decrement it by one so now if we reload our project remove this constant it will remove the error and let's add constant in start of our widgets now if we reload our project you can see that a detail about the animal is shown so that's it for now in the next video we will create a beautiful button at the bottom of our card view which will be used to dynamically change the animal details and images images animal names and their description so now what we will do is we will create a button as you can see in the app preview from where we will call our function to change animal details whenever the user pushes this button so without any further delay let's jump into our Android Studio so first of all what we will do is we will use boxfit dot contain for our image which will allow it to be as large as possible while still within the bounds of the parent widget so now let's move towards our main objective which is to create a button from where we can access our function so that we can change the animal details for this purpose we have to go to a parent widget that is a stack and inside the children at the last we will use the elevated button and the child who will replace a child property with a text let's use text and give it a name of Explore More Explore More so and now uh on pressed we will part we will pass an empty uh callback so now if we reload our project uh you can see that the button is at the top left corner of our screen because we are using stack and we haven't aligned this button so what we will do is we will now wrap our elevated button with the Align widget and after that we will set the alignment to alignment dot bottom center so now if we reload our project you can see that our button is at the bottom of our card but we want to give some padding form below so we will wrap elevated button inside a column and then we will use size box and we will give it a height of 20 pixels because we are using column that's why we have to set its main axis alignment to main access alignment dot end so now if we reload our project you can see that the button is at a perfect position where we want it let's remove all the errors by using constant and inside all callback in onpest let's call our function random number so now if we reload our project and press the button as you can see that the animals are changing when we press the button that if the animals are not repeating themselves because we have implemented the functionality that the animals should not repeat now a button is functional uh so let's give some style to this button for this purpose we will use style and we will use elevated button elevated button Dot style from and inside this we will use padding and we will give it a padding a symmetric padding Edge incest dot symmetric and for horizontal padding we will give it 32 pixels and for vertical uh padding we will give it a 16 pixels so now if we reload a project you can see that a button is a little bit bigger and after that uh we we want to give some elevation to this button so that we can have some Shadow effect for this purpose we will use elevation and give it a value of 4 and as you can see that there is a beautiful Shadow under the button so now let's give a style to our text uh for this purpose we will change the font weight to font weight dot bold and if we reload our project you can see that the text is now bold and let's increase uh the font size also uh for font size uh we will give it a value of 18 pixels and now if we reload a project you can see that the button is looking more beautiful now than it was before let's give a background color to our elevated button for this purpose we will use custom color white now a button functionality and styling is complete as you can see that a button is working fine and the animal details are changing without repeating themselves so now what we are missing is we are missing our bubble animation view because we had commented out that line so that we can focus uh on our image and the circular gradient so now let's uncomment this line and let's add constant to remove this warning and after that let's restart our application ah it will take ah some moment and when the application is restarted you can see that there is a beautiful uh animating bubbles across our card which makes it look more aesthetic now if we press the button you can see that the images are changing also so this is it for this series hope you have enjoyed and learned from this series please make sure to like this video and leave a comment if you like this series and please subscribe to my YouTube channel as it provides fuel to my motivation to keep grinding and share with all of you people what I know thank you so much

Channel: Orhan Yazdan

Views: 7,905

Keywords: programming, development, flutter, dart, firebase, hybrid, hybrid development, animations, authentication, database, android, ios, app development, ui, flutter course, basic, flutterui, UIUXDesign

Id: RXB82bl6huo

Length: 45min 59sec (2759 seconds)

Published: Sun Aug 20 2023