Implicit Animations in Flutter - Learn How to Create Animations with AnimatedContainer in Flutter

hi everyone and welcome to this chapter of flutter animations course in this chapter we're going to talk quickly about implicit animations now we've been creating explicit animations up to this point in the other chapters right before this where we created an animation controller for instance and an animation object or a tween and curves Etc but implicit animations are kind of like widgets that you can drop into your application and that allow you to go for for instance from point A to point B without you having to create an animation controller so that's you creating an implicit animation so you're not explicitly creating it as the name indicates okay so in this chapter we're going to talk about this particular example I'll just bring the simulator to the screen as you can see here we have a very simple application and there is an image in the middle and also we have a button you press this button you can see the container getting enlarged with a simple curve it's bouncing in and out and then you can also zoom out so zoom in and zoom out so this examples created purely using implicit animations and again this is I mean this is quite perhaps a useful feature to have even in a simple application however it's something that is very basic to create and the reason I'm putting it in here in this course is that we cover pretty much every aspect of animations in flutter you can't talk about animations in flutter without mentioning implicit animations so and for those of you who are more advanced users and looking for more advanced content then perhaps the rest of the videos that are to come will be of more interest to you but also there may be some stuff in this video that you can learn as well so let's without further Ado let's go ahead and create the project for this so I'm going to bring up terminal so let's say flutter create and let's say example five I believe we are at and we say org SE pixel again for those of you who know me I always specify the organization it's just so much easier and to do from the beginning and let's say code example five all right and right here let's say select we first select the device okay and I'm gonna say 14 plus and let's go into Json and let's say zoom level and it's going to be five all right and we go into main Dart in here I'm just gonna drop my flutter scaffold application save it and then select we've already non-select device I'm just gonna compile this all right so let's go back to the app itself and see how it is created you can see it is a container in here and then we also have a little button so and then there are created inside a column if I'm not mistaken okay so it's just vertically displayed on top of each other but we also have an image in here so let's go ahead and create an image so and this is this is one of the tricks I usually do if I want to place an image in here with some subfolders I first go and create a file and then I specify the path I say assets and then I say um images for instance and then I say one jpeg all right and then it creates the folders for me then I can delete this all right so you can also just say create folder you don't have to say create file but usually I'm actually creating files like a Json or something but you can also say create folder and specify the entire folder path all right so in this images I'm just going to drag a wallpaper and that I already have is actually my wallpaper which is sitting behind this oh it is here at the back actually is it no it's not it's not that one it's another wallpaper that I sometimes use but I'm not using it right now it just happens to be that that case so let's go ahead and bring this wallpaper I'm gonna go and find a folder that we just created and Say wallpaper and then drop it there okay there is the wallpaper I believe it's actually quite a large image so it is not a small one all right so now that we have that I'm going to close this and let's close the inspector let's go to our Pops back yaml and we're gonna go specify then the path to this image and we're going to say let's see here assets I'm going to uncomment this and then we say the folder was assets slash images like this and then the image is uh wallpaper wallpaper jpeg if it is correct then it should be displayed here oh it's it doesn't exist assets images wallpaper jpeg it looks fine to me I don't really know why it is the acid file assets images wallpaper jpeg doesn't exist creating the file or fixing oh I can see now the problem is that I created this folder under vs code and that's just stupid so I'm gonna drag this and see if I can drop it outside somewhere if it allows me and let me see if I can drag it like down here somewhere uh perhaps here somewhere to the root folder if I did it correctly let's see if if I've actually done it correctly now assets yeah seems to be in the root folder now so I'm just going to save this and see there we go the image is right here right now that we have the image let's just close this pops fake yaml and we can go into our main Dart file and in here all we really have to do is just to uh go ahead and create basically the column so let's see how we're going to structure this let's say that we have the body here and let's say body and usually as you as you probably know me already I go ahead and create my component like inner components first okay so what I'm going to do is I'm going to first create a text button so I'm going to say that's my text button and the first parameter unpressed let's say unpressed like this and let's go to the second component which is the child I'm just going to say text hello all right and let's see here here boom and let's see how our application looks like now if I bring up our simulator here okay so I can see I added a comma in here so let's remove that we just have a Hello and let's then put this wrap it inside a column like this and then we also need to have an image all right so what I'm going to do in here is to and to display the image is to actually create a container for it and the reason behind it is that we have an impulsive animation in flutter which is called animated container okay so if we create a simple container just to display the image now we can just switch it later to an animated container to freely and easily get that animation effect that we saw at the beginning of this video so let's go inside this children here and say that we have a container all right and this container then is going to have let's see uh like this let's say that it has a child all right and then we're gonna dump the image in here so let's say image dot asset and the asset was I believe assets images wallpaper.jpg like this and I can see the wallpaper wallpaper here to the left hand side yeah really good I mean it is complaining right now saying that the container isn't necessary because we could just jump and start dump the image in there and it is correct because we don't really need the container because it's not doing anything but soon we're gonna Swap this into an animated container so that's the reason this guy is right here so let's see how it looks like there we go this is our application right now okay so let's go into this uh column and say that we want the content to be in the center so let's say main axis alignment and we're going to say Center main axis alignment center there we go so it's it's starting to look a lot more like this example right at least when it was zoomed in so one thing we could do is to take care of this button title you can see when the image is zoomed in then you can see a button that's a zoom out and when the image is zoomed out you can see the button that says zoom in all right so what we could do is to create two variables in here and let's say VAR zoo and we can convert this to a state full widget right because we're gonna actually work with implicit animations and implicit animation is one of the keys to to implicit animations is that you need to do set State on them actually so you need to do set state in order to get the animations to kick off all right because you don't have uh your animation controller that you can just say start the animation controller the way to communicate with an implicit animation is usually through a set state so let's convert this home page to a state full widget all right and let's create a variable in here and we say VAR is zoomed in and by default we're we're not zoomed in all right and then we also are going to have a variable that says VAR button title and the by default since we're not zoomed in we're gonna say by default the title is zoom in right so let's take this button title and then Chuck it in here so we say the button title is that and it's not a console anymore right there we go good and then we can go when the button is pressed to do a set State and then say now we're zoomed in all right so let's say um set State there we go and we say is zoomed in it's equal to not zoomed in let's see because it's final did I Define it as final right these should be variables okay I think I Define them as variables but Visual Studio could actually corrected it because I didn't have a Setter for them so if I comment these out you can see this is the value of the field isn't used try removing and then if I save they are converted automatically to final so that's pretty nice actually okay and I think that's one of my fix commands that I have so if I say user settings and if I look at Dart I have a lot of code actions on Save and I believe at required fix all trailing this expression create Constructor no I actually don't have that but it is possible that fix all is doing that all right so if I comment this fix all go back here change these guys to VAR and then press save I can see that they're not changed to final but if I uncomment this and I have fix all and I go here and press save then they're converted to final okay so now we know the source of fixing those variables from VAR to final it is Source fix all okay good for me as well to know now let's go back in here in set State we say is zoomed in is going to be flipped and bottom title if we are zoomed in it's gonna say zoom out otherwise it's going to say zoom in so I'm just going to save this as you restart the application let's go here this is the completed application and this is our application so by default we're we're zoomed out all right but this container isn't reflecting that so if I press zoom in then the buttons are zoom out and then you see it's flipping that all right it's just this container now we have to take care of so what we could do is to say okay we have some sort of a default width for this image so if I bring the completed application you can see that this is the default width let's define that somewhere so let's let's go here and then I'm going to say const default width like this and default width is uh 100 all right like this and let's let's make it a double and what we're going to do is to Define a variable in here so we say we have a width because we're gonna in set State change this width and then ask this container to adjust itself to that width all right so let's say VAR uh width is we start with default width then we go to this container and we say that its width is equal to the width that we've defined there we go then in here we change this width so we say when let's go ahead in here and we say with like this is equal to if we're zoomed in then we're going to get the entire screen with so I'm going to say media query of context and then I'm going to say size.width otherwise take the default width all right good so that takes care of the width and also in here we have the width for always change the size box I didn't want that let's change it to container it's my visual studio code that's it's fixed all actually which is doing this but don't worry about it I mean this should actually be container so in your head read this as container okay it's that fix all thing that is messing this up as well or actually is trying to fix it but it for us is messing it up so there we go here we have that uh so I think also to be honest with you um this I wish we could put this inside a row so we could extend this so let's say this is inside a row uh wrap it with a row and then I'm gonna say uh main axis alignment is Center main axis alignment center okay so now it's in the center but you see now the width is changing as we expect but there is no animation so let's go and Define that animation and it should look like this you can see all right so there are two things for I believe two things for actually one thing perhaps for the animation let's say that we Define a curve so in here we say VAR curve and by default we say the curve is Bounce out so bounce out like this and that's our default curve which is this one you see bounce out and then we change the curve when we're going in okay so that's our our default curve and we say it's a variable then let's go in here and inside instead of size box change it back to container and then we want to create that implicit animation all right and the way to create it is just to say that this is an animated container okay now it says okay but what is the duration so let's say that duration is a const duration milliseconds 370 and like this and 370 is a value that I believe I mean I've worked with animations quite a lot and this is also coming from like very early iOS days when you had animations on like UI view animations and one of the key durations for animations that are pleasing to the normal human eyes is that the animation takes no longer than 500 milliseconds and more than 300 milliseconds so anywhere between 300 and I would say 300 to 400 is like the most pleasing animation duration if it is longer then you kind of get bored and to be honest with you I'm actually not a fan of apps that use a lot of animations because the apps that I use I'm usually a super user for those apps so if I really use an app and it could be for instance a shopping application where I want to go and buy some stuff online then I really really don't want it to do a lot of animations because as a super user I just want to be able to tap here and they're super fast to get to from get from point A to point B so when you're working with animations I've seen a lot of people like go and write apps that are just full of animations everywhere and I usually cannot appreciate apps like that okay it has to be a very special case for me to appreciate I think animations like a lot of animations you usually belong to games that's my opinion alright so I've seen apps like people do pizza delivery apps everything's just rotating the pizzas rotating and then you tap here and something flies off the screen and I mean it's it's a nice concept but I probably won't use that so just just so you know the duration of your animation is very important and that was just a little derailment from the main topic but the reason I'm putting 370 in here is just simply because duration usually needs to be between 300 to 500 unless you have a very specific reason not to have it in this in this range and also just to note this particular duration is usually most pleasing on mobile devices so I'm not saying that this is for every platform on the web it may be different on desktops it may be different but this is mainly for mobile devices where people usually use an app for like a minute tops something like that all right and also this minute I'm kind of making up but usually like the data that I have from the apps that I've developed I can see that like a lot of people just use it quickly we get to get from point A to point B and then close the app because they're done they've done what they needed they needed to do so and you probably then don't appreciate lots and lots of animations uh that was just a side note so now that we're done with that I change this to animated container let's go ahead and set the properties on it so we say the curve of this animation is equal to curve that we've specified all right and also the asset is ready seems like pretty much everything is ready here so we could just save this and then let's go in here and also change the curve so we say the curve is also different if we're zooming in in or out so curve let's change it back to a VAR here okay so we say if we're zoomed in then we're going to say that bounce out bounce in out let's say bounce in out okay and then if we're Zoom it's zoomed out if you're zoomed in and then otherwise if we're zoomed out let's say bounce out and you can play with these to be honest with you curves yourself as well to see like the effect that you get so let's see how it looks like there we go and here it is the animated container okay and this is an implicit animation because you can see we're just simply doing uh a few like just one set State and changing some parameters to get this nice little animation all right and it could be useful in some applications to be honest with you it's not that difficult to imagine that something like this could be useful okay so I really hope that you enjoyed this video if you have any questions just let me know and please don't forget to subscribe to my channel hit the thanks button at the bottom of the screen if this video was useful too so see you in the next one

Channel: Vandad Nahavandipoor

Views: 5,147

Keywords:

Id: D3anrRzLMw8

Length: 18min 38sec (1118 seconds)

Published: Mon Feb 20 2023