Build Animations in Flutter (Livestream)

hey everyone welcome back to your favorite live stream so in this live stream we are diving into the cool world of animations so we will build some UI animations using flutter and I see that a lot of people are already joining the live stream uh yeah so I guess we can move to the next slide uh so yeah before we start so let me tell you today along with me we have rammen with us and together we will be making this live stream as as interactive as possible for you and we will be guiding you along uh with this live stream so before uh moving ahead uh you can also like uh drop your thoughts and questions in the chat and we will uh we will look at your questions at the end of this live stream uh so before I mean all right so let's move to the next slide so in this this live stream we are uh having bunch of uh topics so first of all we are going to explore the topic of animations so we will start by talking about what animations are all about and after that we will take a look at how flutter does animations and what is the flutters approach to animations next we will actually try out some animations together and these animations will make your apps look really nice and beautiful and to the end we are going to have a Q&A session you can ask us anything you are curious about and we will do our best to give you some interesting answers so stick around and let's have some fun with animations so we can move to the next slide yeah so here's the quick reminder that we have this uh WhatsApp ha flutter community so if you guys have not joined you guys can directly scan the QR code and we are also going to drop this link in the chat uh so basically in this uh Community you guys can hang around with your uh with flutter developers with like-minded developers you can get the updates what's going on in the world of slutter so this is the best place to to to know what's going on and uh to get some news and to to solve your questions you can you guys can also ask your questions and there are a lot of people who can or answer your questions so this is about the WhatsApp Community we can move to the next slide so apart from the WhatsApp Community we are also having this WhatsApp Channel which we have created few days before you guys can also join this by scanning this QR code and in this WhatsApp Channel basically we are uh planning to also release some videos we will be also releasing the news updates regarding the flutter and some information some articles about flutter we will be planning to we are planning to uh Post in this WhatsApp channel so this is about the WhatsApp Channel now we can move to the next slide uh so yeah let's start with the first topic which is Introduction to animations so this topic Ramin is going to introduce you to animations so yeah I guess Ramin over to you okay thank you Kam now let's just start with our uh topic based live stream and talk a bit about animations and how we can uh and why we should use animations in our flatter app so basically I can tell you we are going to implement some animations effect in our application to make it interesting uh to make it more interesting to the users we can just Implement some cool animation effect while uh for example while we are loading the data or displaying some widgets in our applications or maybe when we are just navigating between two different between different uh different pages we can just Implement some beautiful animations effect to make it uh more interesting to the users okay now let's go to the next slide first of all we need to know here how how we are going to uh use animations and flatter so I want all of you guys to stay with as through this live stream and just uh watch us to learn uh to learn more about animations and how we can Implement animations and flatter okay now we can go to the next slide first of all I shall tell you we have two types of animations and flatter implicit animations and explicit animation animations which I'm going to explain each of them individually through this live stream okay now we can go to the next next slide uh now let's just have a talk about implicit animations I can just say the implicit animations and flatter all the simplest animations why I am saying that because we don't uh really we don't really need to do anything and we don't need to know about animation so much what we need to do is we only need to just provide some values to the properties of some V and yeah that's all the other things will be on flatter and flatter will take care of all other things and it will Implement animations for that properties while we are changing that value of those properties for the widgets let me just give you an example to make it more uh clear for you guys you guys uh first of all we need to go to the next slide here as you can see we have a simple container and we are uh in the color property we are toggling between green and S uh colors but as you can see whenever we toggling it's immediately changing uh and toggling between these two so it is not really looking good uh we can somehow add some anim simple animation uh to this uh how we are going to do that if you go to the next slide I will let you know uh so yeah instead of instead of the uh simple container we have the animated container here as you can see we can use that and when we are uh it has the color property also we going to change the color property based on uh on whether it is clicked or not and whenever we are clicking and toggling between these two colors you see some small animation is happening it is not going to change immediately so uh in in this simple way we can just toggle between this uh this uh different colors and as you can see at the first property of the animation we have the duration property and it means it is going to take uh it is how long it is going how long it is going to take for finishing this animation so that's why we just for example here we just mentioned one second so it means it is going to take one second to just change and have uh that animation between this when we are toggling between these two colors yeah this was about the uh implicit animations and I have tried to giving you one simple example now we can go to the next slide sometimes in flatter we cannot uh achieve some animations with the implicit animations so that is when explicit animations come in we can create a complex animations using this explicit animations and while I'm saying we can create complex animations so we need to somehow control these animations and for controlling this animations we need some uh some controller so the for controlling that we will use animation controller I will explain it in the next slide if you goad so as I as I told you for uh just controlling the explicit animation we need to use the animation controller and I can say the animation controller is a special animation object which generates some values between zero and one within a specific duration as you can see in this a small example at the bill of this uh image we have initialized the animation controller and it is having a duration property which is we have defined here for two seconds so it means within this two seconds the animation controll value will be changed between zero and one and use using these values we can control our animation our explicit animations I hope it was understandable for you guys so yeah we can go to the next slide but uh let's just have a example also here to make it more clear for you guys uh with the explicit animations and how we going to use animation controller to control our animation so in this case I'm going to just rotate going to use the rotation transition to have a rotation effect on our flat logo now let me just share here my screen first of all to you guys to see the base code of this example okay I think now you can see my screen and as you can see here I have a simple flatter logo at the center of my body and I want it to just rotate I want it I want want to add some rotation on this on this flatter logo I only need to wrap it around with the rotation transition and as you can see here we are having one some problem why because it has a required property so we need to give its required Pro property and give some value as you can see here this turns property is taking one animation object so that's why we need to Define our animation controller so let's go up to our state and then Define our animation controller here and as as we as we want to start this animation whenever our application is starting so that's why we need to initialize our animation controller inside our init state so here we have successfully initialized it and we have given a duration of two seconds the the animation should uh last within this two seconds the next important property for the animation controller is this vsync and it always take this property but now as you can see we are having the problem for this we should always remember that whenever we are using the animation controller anim Mission controller needs a ticker provider so to fix this we need to go up to our state and extend it to the single ticker provider State mixing and after that here you you can see we just implemented this single ticker provider State mixing and after that we we could successfully resolve this problem all right next to that we just need to start this uh animation so the animation controller have some methods for that the simplest one the simplest method is the forward one so after we initializing it we will call the forward here and yeah that's all we can just uh see the rotation animation but wait before that I need to just save it uh I'm facing an initialization error why for the controller because I initialized it here in the enti state for just uh removing this error I need to just hot restore to just rest the application from the beginning then the ended State method will be called and my uh animation controller will be uh resolved okay as you guys could see it we had we could just somehow rotate this flat logo here and it is finished because we only called the forward and it always happens one it is it is a starting the animation and it will rotate it and that's all in case we want to rotate it forever and repeat this animation so the animation controller has another another method called repeat so instead of forward we can just go with the repeat method and call it here let me just save my code here again and after saving again I need to hot restart it to just start the application from the beginning after the after I'm restarting it you can see the animation is started and it's always repeating because we called the repeat method all right this was a simple example uh which I wanted to show you to just know about to just know more about the animation controller and how we can control our explicit animation using this animations okay now we can go to the go to our sliders next to these two types of animations in flatter flatter is giving us a lot of packages which we can Implement a lot of animations without customizing like we don't need to customize it ourself or we don't need to implement some animation effect on it so we but still we can use this packages to have a lot of animations I'm just giving you these two uh packages and showing you these two packages because these are really famous one and a lot of developers are using it the animations package and also the flatter animate we can use these two packages to implement different different animations effect in our application okay let me just share again my screen here and displ and go through this animations packages okay here you can see my uh screen inside the pop. div I search for the flatter animate and you can also find it from the pop. div website as you guys are seeing it is a famous one it is the flatter favorite package also it means it is really powerful package it has a lot of uh likes and so many developers are using it what does it do exactly what kind of Animation we can get from this packages we can go through the documentation and here as you can see from this images and also this text it is giving us some some pre-built effects like fading some an some vets or scaling sliding and so on as you can see uh this kind of pre-built animation effect we can implement it on our text as as it is available here or maybe some animation effect on our item list here in this example you can see in the next one you see we we can have some gradient animation effect uh in our text and so on a lot of other built-in uh animation effect we can implement it using this package how we can implement this uh animation with this package first of all we need to add this package inside our Pops spec. demo file as all of you guys already know about that uh so after we are installing this package we will be accessed to use the animate package and whatever widget inside our application which we want to have this uh uh we want to implement some animations we can wrap it around with this animate widget and this animate widget has an important property and it is quired uh the effects property inside the effects we can have multiple we can add multiple animations effects as in this case you can see for this text we uh it is adding two different animations effect like scaling and also fading effect uh I have already installed this package in my system and I wanted to try how it is really looking let me just share the uh output of that after I just uh wrapping around my text with this animate property and giving this two uh animation effect you can see something like this animation effects I'm I'm getting from this uh these two properties so it is really simple to use this package next to that we have another uh famous and Powerful animation package by the name of animations again we can just find it inside the pop. div website as you guys can see it is a lot it has a lot of likes it means a lot of developer developers are using it so we can also use it in some some of our application I'm sorry so uh this uh what kind of animations we can get from this package if if you you guys go through the documentation and see maybe see this images I think for this package we can get some a beautiful animations effect while we are navigating between different screens for example in this case in the first example you can see when uh we clicking on that first item it is giving that uh beautiful transition and becoming bigger and be uh then when we going back it is com smaller or in other example you can see uh suppose we we are having a search bar and when we are clicking it we want to go to the search bar page but with an animation effect so using this packet with with using this package we can just uh having this kind of cool animations I think you guys also can go through this documentations and check all the animations effect which we can implement it maybe you will need one of these animations effect all right that was about these two powerful and famous animations package now let's go to the go to our sliders before we go further uh with our live stream and talk about the animation I want to to tell you that you guys can uh write your questions uh inside the live chat at and at the end of this live stream we will have a q and a session part which we me and kamish uh we both going to uh answer all of your questions about the animations so feel so feel free to just uh write down your questions about the animations and then at the end we will go towards your comments and questions and answer all of them okay now let's go to the next slide here is uh we reached to the most interesting part of the this live stream in this part we will go to talk uh we will go we'll go and we will have three different project and we are going to implement some animations on on those projects and uh to just learn more about the animations okay uh we have already created a repository and we have already sent a uh give all these repository links inside the live chat you can get the three different projects uh and download it from our repository the base code which we will have it in our system and then through the through the live stream you guys also go uh with us to just Implement all our animations whatever we are going to do it do it so okay the first animation uh the first project will be about the toggle button which kamish is going to uh talk about this one more all right you can go on kamish uh thank you Ramin thank you so much and thank you for explaining everything about animations really beautifully so you have conceptually like explained everything but now we are going to also Implement some of these animations so right now if you see we have this toggle button animation so if you see like when user clicks on this button this the color is animated from the gray to blue color as well as this icon is moving from the left to the right so we want to achieve this kind of Animation in our application uh so let me share my screen so yeah so here if you see we have already uh created uh this base code and you guys can also like start along with me maybe you have already downloaded the code and uh you can just um uh I mean uh get your dependencies and directly start along with me so here if you see we have this uh container with some border radius and having this gray color so first of all what we want to do is if we go back to the example uh here we want to animate this gray color to blue color so this is the first step uh to to do this kind of Animation so what we want to do is uh we are going to use the animated container widget which Ramin already EXP explained during the implicit animations so as you know like animated container is also an implicit container implicit widget so here instead of using the container we have to use the animated container so you can directly use the animated container but this is throwing this error let's see so if you see the named parameter duration is required which you can see right here the duration is required so why the duration is required because you need a duration to animate anything so here you guys can give the duration of I'm going with milliseconds of 700 milliseconds uh you can directly save this and now what we want to do is we want to animate this gray color but when you actually want to like animate this gray color to blue color so when user will click on this button we want to animate uh the color so basically we have to wrap this animated container with gesture detector so you can also wrap it with gesture detector it has the ontap property uh and you can directly use the set state to actually uh make this happen uh so here uh now we have wrapped the chest detector but it will not work but because we have not done anything uh so we have to understand that like we what we want to change first of all we want to change or the animate the color so basically we want to have a Boolean flag uh which I will name it as is animated so let's have is animated true at first so when is animated is true we want to have uh the cray color and when it is false so we want to have the blue color so you can use the colors. blue and maybe blue accent just save this and you can toggle this Boolean flag inside this set state which we have already created so here we just need to uh toggle this is animated bullan flag and yeah that's it so if you click on this button uh you will see it the color will animate and here you see like the blue color is like appearing right from the gray color and if you click again uh the gray color is appearing and the blue color is disappearing slowly and you are getting that animation effect so right now what we have done we have just implemented the gesture detector to trigger the animation set we have set this animation as true and just changing the color using this flag so these are the simple steps that we have done the next thing we want to do is if you go back to the example we are also changing uh the color of the text earlier it was it is black and now it is white so also we are also changing the text which is Mark as read at first and when we click on this it should be marked as red so these two things we want to do so again if you if you go inside your code uh you just need to use the same is animated Boolean flag so I mean the one place to use this is first of all let's change the color uh maybe later on we will change the text as well so when the animated is true the color is black and when it is false we are going to show the white color it is throwing this error because we have the constant here just remove this and just save your program and and uh let's do the same for the text again and here if there is animated true the text will be marked as read otherwise the text will be marked as red so marked as red so just save this and let's see if uh the text is animating the color is animating and the text color is animating so if you click on these button this button the color is animating from the gray to blue the color of of the text is also animating and the text is also animating so this is the one thing that we have achieved if you go here the color we have already achieved uh by using the animated container but the second thing that we want to do is we want to animate this icon from the left to the right so as we already know that in flutter we have the positioned widget but that position widget Works only if you are using a stack widget so we are are going to use the stack widget we are wrapping it with the column changing this stack column from uh changing this column with stack and uh but now in animations we will not use the positioned widget because we have the animation positioned widget and we are going to use that uh but before that we have to create that icon with white background I have already created that right here here I am just going to copy this just to save the time uh I have already created this before and if you save this you can see this icon with the white uh circular background uh but now what we want to do is we want to wrap it up with the animated position as I mentioned so you have to just animated uh positioned so as you guys know position has the properties left right bottom and top this animated position also have these four properties so let's uh use the left zero not the left but first of all the top property zero the bottom again zero uh but but now the error is not going because it again having this duration as the required property so we are going to set give it the same duration that we have given here for the animated container and if you now save uh our error has gone and uh uh the like this this is uh the icon is stretching the background is stretching a little bit we have to Center this container so you can wrap it up with Center widget and now it is already centered as well as it is not stretching uh but now if you go back to the example uh here we have some padding from the left side it is very small padding so we want to have this kind of padding in our uh in our app so for that we want to also set the left property of the animation animated position widget is maybe five or eight I'm going with eight and now you see it is already like uh at the right position I guess this is the right position according to its width so now what we want to do is we want to animate it from the left to the right so maybe we want to have it at 200 uh something like this but uh this again is not correct so we have to do some calculations for this but but simply like just have uh the eight as the position right now the left position so we have to use again the same Boolean flag but this time for the sake of Simplicity again I'm going to change the name of this bullan flag uh to make B is on left I'm going to click on I have clicked on F2 just to change the all all the currencies is on left so at first is on left will be true so that's why I am keeping it as true so right here if is on left is true we are going to have the 8 pixel as the left side uh otherwise we want to have U something like 200 maybe uh so when you click on this it will animate from the left to the right side but right now this calculation is wrong this number is not uh right this is wrong so to do that we have we have to do some calculations if you go over here towards the width of the this total con total uh container is 250 pixels so we have to utilize this width so I have created uh some graphics for you to for better understanding uh so here if you see the WID total width is 250 pixels and the width of this icon is 35 and the padding from the left and right will be 8 pixels so the total width of this thing this position uh this this is like 43 so we have to minus we have to subtract this 43 from the overall pixel from this to 50 just to get the perfect position this position right here so we are going to subtract that let's go back to our code and right here instead of writing some random value we have to use the width variable and we have to subtract 43 so you already know like where from where this 43 comes in we have added this width 35 Plus this eight as the padding so when you save this uh you already you can see like this this icon has moved towards the right side and it is like looking really good and I guess the padding is also uh uh correct yeah so if you see like the padding is also correct so now there is one thing left in this which is uh this uh icon this I icon which is the visibility icon so again we can again utilize this is on left Boolean flag if this is true we are going to show the visibility icon otherwise we will show the check icon if you go back to the example we have this check icon here so uh let's go back to the code and just use this icons start check and this is throwing this error because of this constant you can you guys can directly remove this and just save this and now just click on this button and now you see like the button is animating the position of this icon is also animating the color is animating the text color is animating when the text is animating there are a few things I mean U three or four things that uh those things are animating simultaneously so but here is one thing the animation is um is very slow because uh this is like because we have set this 700 which is not so good for the production applications so you can maybe make it 300 uh to to look better and this was only for the de demonstration purpose so just save your code and then click on this again so now you see the button is animating and it is looking really cool so you you guys can Implement these kind of animations like the simple animations like the animated container and animated animated position widget just to achieve a really cool animation so this is is the one example very basic example that you can do to achieve really cool animation uh the second example that we have is uh this hero animation so maybe you guys already know about hero animations but we have seen like a lot of people uh is not using these animations uh because we have conducted um this coding Challenge and a lot of people have participated in this kind of in this coding challenge but but we have not seen a lot of animations from people so we are we were thinking okay maybe some people are not aware about how to use hero animations this is very this is very simple animation that you can have uh in your applications uh so let's go to our code that we have already uh created you guys can also access this code from the repository that we have shared and uh here we have already created uh this like list View Builder we have this homepage Details page we have created this items model with some data which you can see here so now let's go to this homepage uh so now if you click on any image there is no animation uh nothing going on so we just want to implement this this simple animation so first of all we need to understand what this hero animation is all about uh so let's go back to our Graphics uh so here for the demonstration purpose I have created these two screens so for the hero animation for example if you have a parent screen where your uh I guess a list is or maybe your grid view is and there is one uh there is another screen which is your details screens or maybe you are showing something on that uh so we are taking like this list view screen as the parent screen and detail screen as the target screen so what we want to do is and what we can achieve with hero animation is we can animate this image right from here to this position so if you see here uh I I have mentioned like when you tap on this it will en image right from here to this position so now let's Implement Implement implement this this is really simple so first of all we have to locate this widget uh this image widget so this widget is right here so what you have to do is just wrap it up with hero widget and if you over on this you will see like it has this tag as the required property so just use the tag right here so again if you hover over this what is this tag this tag is an identifier for this particular hero so maybe for only for this item so basically this is for individual item so this tag should be unique uh and because of that we are using some unique identifier which is item here because every item is unique with this index we are accessing all the data from this items. data uh items file uh and now when you go back to homepage here we we have to use the items directly so just save this so we are done with the uh parent page uh now we have to go to the Target page which is our Details page so here again let's locate our uh image widget which is this built image so here again you have to wrap this up with hero widget same thing you have to do here as well you don't have to do anything else the same thing so here again I am using the item because we are supplying this item from the parent widget and just save this and let's see what what it has done uh when you go back and just click on any image and now you see this image is animating really beautifully from the parent screen to this target screen so you can click on any item and it will animate right from that place uh from the bottom as well and it is looking really cool so we have done only two simple things we have wrapped our image in the parent app as well as in the Target app with this hero with this hero widget as well as we have passed this item as the tag so this is uh this is like really simple you guys can Implement in your uh some apps and you will see like it is no braer Nob brainer you can easily implement this this kind of application so these were the two animations that we have implemented so yeah let's go back to uh the slides uh so the next uh uh next animation we have is this login page animation this is going to be a little complex animation so Ramin will take over and he will explain and show you how you can achieve this kind of Animation in your application yeah so over to you Ramen okay thank you so much for your best explanation and you try to make some animation on our projects okay so now let's go and just uh I uh let's just go and talk about this Pro profile page and just make some animation on them I hope you already uh got the base code from the from our repositories which you can go along with me to just make these animations all right now let me just share my screen here I don't know if it is okay now you guys are having my screen I think this is my simple app with one image and one loog form which has two different text field one for email and another one is for password so we want to just Implement different animations for on our different widgets first of all we will go with this welcoming image which we have it here we want to implement two different animation in it on it one animation is for fading in F fading it out when the when the application is opening we want to have an animation effect and it should the the image should be fading out and next to that we will uh have the another animation to be it is the scaling up while the again while the image is while the application is opening we will have two different one two different animation fading out and scaling out so first of all let's go with uh with the first animation we want to implement the fading out and as and as I told you before uh for having uh some animation with explicit animation while we are using the explicit animation we need to use animation controller so in our in our application inside the inside the state we will uh Define our animation controller and as we want to start the animation whenever the application is starting we need to initialize it inside the Ed State as you can see here we have already uh initialized our animation controller and give a and we have already given 4 seconds for the duration and also here for the vsync you can see we are giving the this uh value but as you can see we are having a problem here we should always remember this uh I think I have told you before we should always remember this for uh using the animation controller we need to provide ticker so that's why again we will go inside our state and then extend our state with the single ticker provider State mixing and after we are doing that you can see we the this problem for the vsync is uh it is solved already because we are using this single ticker provider State mixing after we initializing you can see again we are calling the forward which means we want to already start the animation okay next what we should do is we should always remember that whenever we are using any controller in our application and whenever we are initializing any controller in our application after that we need to dispose it to avoid memory leaking it is always important after we are initializing any controller in our application we should always remember that to dispose it so that's why inside the dispose method I'm just uh disposing my controller here okay after that as I want to have some animation effect while this image is fading out uh some some different animation effect that's why I have to Define one animation object therefore inside the inside the state class I'm going to Define my animation object with the Fade Out animation and again I will come back to my in state and here I need to initialize it here uh as you can see see I'm initializing my Fade Out animation with the curved animation why I'm doing that because I want to implement some animation some different animation effect so this curved animation has two important property as you guys are seeing here one is the parent which we are giving our controller here why we are giving because we want to connect these two together after that here inside this curve property we can Define our different animation effect and in this case I am using the E out animation effect but you guys can use different one after that uh what we can do is we need to go to the build uh method and find our image here and only here we need to wrap it uh around with the Fate transition widget uh this is one of our explicit animation widget uh and uh yeah yeah it has a property called opacity and inside this opacity we are giving our Fade Out animation which we have initialize it here in our state all right that's all now after saving our code okay we are facing this problem for uh like initializing it means we are not initializing the fade out but you guys already know we had initialized our Fade Out animation but inside the Ed state so and now the Ed state is not calling so for that for fixing this uh problem we need to just H restart our app to just call the Ed State and then we can see our animation okay you guys couldn't see this animation I think because I'm doing a lot of things in my system and my system is hanging let me let me just uh hot start again my application I hope this time you can you guys can see it okay as you saw already we are having a fading animation in our image whenever we are opening our login image next to that as I told you before we want to implement two different animation effect in our image welcoming image therefore again we will go back to our image here and and then wrap uh and then here we need to wrap our F transition with the animated bu with the animated Builder widget and then inside the Builder property we need to have we need to give the transform. scale so using this widget we are going to give some values to scaling up and scaling in the anim uh the welcoming image okay it has a property called scale and here as you can see we are giving our controller value why we giving the controller value in the beginning of the live stream I told you the controller value will be changed from 0o to one based on some durations we have this four 4 seconds durations So based uh based on this 4 seconds duration we are going to have different values between zero and one and by changing of these values we are going to have our scaling app animation so for only list now the only thing is left we only we need to listen to the changes of this value how we can do that we need to give our controller to the animation property of our animated Builder the animated Builder will take care of that and it will listen to the all changes of our controller value now let's just save uh our code again and also hot restarted because we are calling all our animation methods initializing everything in N state so any state should be called again as you can see guys yeah next to the fading out animation we are having the scaling up animation on our welcoming image that was from our welcoming image next to the next to that we want to also have another animation for our login from here we want to slide it up from bottom so for that we need to use another animation controller then we need to go to uh we need to go up here but before we we need but before we Define our uh second animation controller I should uh change this single ticker provider to the ticker provider because uh we are going to use multiple controllers so let me just change the single provider to the thicker provider instead mixing and after that we allow to use more than one animation controller here now we can Define our second animation controller here and and then we need to go to our n State again initialize it here in the N State and giving the same duration because we want to we want this animation also happen in the same duration and again we are calling the forward here next to that after that again we have to go to the dispose method as I told you before we need to always remember that to dispose all our controller after disposing as uh uh okay after that we need to we will go up to Define another animation object now we are implementing this animation of type offset why because we are going to animate this container or this login form and change the position of it from the bottom to the top that's why we are using the offset so again we will go back to our anti State and here we will initialize it we will initialize our slide out animation with the with the twin type of offset as I told you with the offset we can just give the position and what is the twn TN give us two different property it means from where it the animation should start and till where it should uh it should be happening the beginning property and ending properties so here first of all in the beginning property in the begin property we are giving at uh we are giving the position of our application from where it should it start from the x coordinate we will start it from zero it we are not going to change the uh we we are not going to to Sliding our our login form horizontally that's why we are giving it zero here but uh vertically yeah we going to uh animate it vertically that's why we're giving uh the Y coordination one it will start from here which means from the uh bottom side of the application and where it should be ending again from the x coordinate zero because we are not going to change the uh we not going to animate it horizontally and also from the uh we are going to end it at the Zero by the for the y coordinate because this is the position this uh the original position of our uh login form okay now we need to somehow animate this so that's why after that in here we need to call the animate method and inside this animate method we can just again have the curved anim why I'm again implementing that because I want to give an a different animation effect for that so again here I'm just giving these two important properties which is the parent but this time for the parent you you can you can see we are giving the cont our second controller because we are using the second controller for this animation and then again for the curve property I am using the same animation effect as for our image to just look at to just make it simple and look better and and it if we just use a lot of different animation it is it will be more complex not complex uh like uh make it uh clear not uh make it clear yeah I can say in that way so that's why again I'm using it a same animation effect after that uh what I need to do is I need to go to my I need to go to my design and find my uh login form as you can see inside this align widget we have this container which is containing all my login form here therefore I need to wrap this widget around with the slide transition and as you can see it is giving error because we need to give uh we need to give its required properties and it is the position property uh for the position property we need to uh we are giving our slide out animation which we have defined in the above and our in state all right that's all now we need to now let's just save our code here again after saving our code we are having the same problem for the slide out animation because it is saying we we didn't initialize it but you guys already know about it we need to just hot restart it uh After hot restarting the application let's just wait for a minute okay after this you can see we are sliding up our login form from bottom to the top and also let me just uh check it again and show you again what was the how was the animation looking yeah and and next to that we are having this cool animation sliding and fading out with on this image all right okay the last thing which I want to tell you I want to just reset the animations whenever I'm clicking on this button it means I want to whenever I'm clicking on this button I want to reset the animation and the animation should occur uh again and again so that's why let's just find our elevated button okay this is my elevated button and whenever I'm going going to click on it I using uh this control the first controller and second controller I'm sorry let's go back here let's go down and find the code here okay as you can see I am uh I am resetting my both controllers to start it from the zero so it means it will always start the animation from the zero and it is going to happen again and again okay let me just save my code and show you guys now after I'm clicking on this lugin but uh lugin you can see we are having our animations effect here like this again I will just click on it and you can again see the animation is resetting and it is going and it is happening again okay that was our third example I hope you could understand a lot of things from these examples which we have given you uh now we can go to the uh [Music] presentations okay now we are uh at the end of the live stream and it's time to answer your questions about the animations I hope you we we can I hope some of you have written some question or ask us some questions let me just okay let me just open the comments here here and I share my screen here can you guys see my screen okay uh I'm just find I'm just looking for some questions reading your comments H hello guys could you find C could you find in that in the meanwhile when I was explaining something I was explaining my project could you find any uh questions from the comments yes there are few questions uh so there is one question from uh Mahmud uh if you see the name mmud you just need to scroll down M yeah here is this person he's asking can we use right other than left to animate it instead of using calculations so mm is talking about um uh toggle switch animation so I have already some something for something to something to show him so I sharing my screen in the meantime all right so uh so Mahmud is asking like if we can use left and the right like this for example when the is animated is true uh it should be like 8 pixel away from the left side otherwise it should be it will it will be null and uh when it will be like uh is animated will be true the right side will be null and the left side will be and when it is like false the it will be like eight pixels away from the left from the right side so if if you implement like this uh it is not going to work uh let's try why so if you click on the button it is not animating so why this is not animating because uh this animated positioned widget Works only on one property because right now you are using like two properties to toggle with this is animated buing flag but uh this animated position only works with one property uh even this uh animated container also works with one property like you are toggling all only the color right here but here you are trying to combine two different properties which is left and right so that's why it is not working you have to use only the one property then only you'll be able to animate it so if you don't use the right property uh let's go back to here so when you save this I'm using the only one property and just click on it and you will see it will work perfectly it will animate from left to the right side so yeah this was about this answer I hope you already understood about this yeah you already written that it works only with one attribute um all right so this was about this question so maybe there are few other questions we can look at them okay now I just see one question from Ravi Kumar he's asking for the road map for the flag you can find easily in the you can just check it in the Google also uh flatter and here you can just find easily from where you should start to learn flatter but as you can see in this road map everything they're making the flatter really difficult for you guys uh but what you can do is instead of that we you can just visit our platform hey flat.com and here we try to make flatter uh really easy for everyone and everyone can just learn flatter in an easy way and and they can become uh an an expert flatter developer so you guys just need to write your email here email address here and just contact with us and after that we can just have a talk with you guys and then we can discuss from where you can start and uh how you're going to which like from where you can start and we have also some uh we have then we will give you our courses access to our courses I don't know I'm not log in here after you're having a call with as then we'll give access for all our courses which you can watch those uh courses and then become an expert flatter developer in an easy way all right this was a flatter map which I hope uh you can just connect call us and then have a discussion about uh this together all right that was about this uh I checked all other comments here I couldn't find any uh questions related to the animations yeah there is one question like do you have DOC for all this animation and others so as RAM mentioned we have this whole 12 week flare training you guys can join this we have like uh not the talk we have a lot of I mean three courses totally dedicated for animations uh in those 12 weeks you will be able to learn animations and other things like State Management as well so we have that already but if you talking about these animations that we have performed here in this live stream we have the base uh base repository that we have base code repository that we have already shared you can check the pin comment uh there you will find and maybe later on you can try to implement these implements these imple these animations while watching this live stream again so that was about this question maybe there is one person person who was asking about when when would you make videos for responsive design for websites this was this is not about animations but uh anyway I will going to answer this so yeah we have some videos uh already already lined up for uh websites like responsive design for websites some dashboard device uh these kind of things so don't worry just stay tuned and there will be a video really soon and web yeah web Tav web Tav is saying you just have to calculate the position either from left or right or by width exactly exactly the same thing that I have shown you you have to do either from the left or right um yeah you have to use width uh to calculate uh the position uh so I guess that's it uh I guess there is no other question from uh I mean with related to animations uh can can you see any question Ramen uh no I don't see any question related to the animation but it's still I don't know did you answer this one where was it someone was asking for the blog Estate Management for the mastering again I I just want to tell you guys about our 12 12 weeks training flatter uh to to become flatter experts so if you guys are joining this we will have a lot of State Management courses also including the blog and you will become Master for all the State Management all as well as the blog uh so you guys can just check our platform and just uh schedule a call with us here we will discuss more about this in the call yeah all right and yeah we are getting like people have joined from different different countes some people from Italy from Brazil from Pakistan that's really good like uh our content is reaching in your countries uh just try to share with your developer friends with flutter developers so that we can create a really quality content for you guys so I guess uh we are uh done with all the questions so uh yeah I mean we are again trying to come up with next topic uh for these kind of live stream so yeah you just need to stay tuned and and we'll back with uh these kind of topic live streams So yeah thank you for joining and you made it like really uh good for us and we enjoyed I hope you guys have also enjoyed so yeah thank you thank you so much for joining thank you

Channel: HeyFlutter․com

Views: 3,330

Keywords:

Id: FhDZqJtU6Ag

Length: 65min 46sec (3946 seconds)

Published: Tue Nov 28 2023