HOW TO Flutter - FadeTransition & SlideTransition - Simple Animations

hello welcome to a new flower video this is going to be a video about animations simple animations in this case we'll be going through fades and slides transitions fade because it's the simplest one which just requires you to pass it an animation controller and slide requires a little bit more interaction by using your twin in this case with an offset and on further videos we'll look into a few more interesting twins and transitions that we can use to provide some simple animations so let's get to it we have here a simple app this app has nothing else than just a button to go into a second view we've got a little kitty here we've got a title and we've got a bottom detail area here so we're going to do is animate this title and animate this bottom here I want this title to fade and sell in from the left outside of the viewing area into our viewing area and the bottom bar to do the same but instead of coming from this side it's gonna come from the bottom into its final position here so let's get into it now I have the code here sub slightly separated so we've got a home page here we've got our second page in our second page then we have two stateless widgets which is a text in image that we have here on the emulator and then we have our bottom that we have down here just with the text a little shadow just to look cute so let's start with that we could use an animated animation controller inside each of these widgets changing them to stateful widgets but we actually don't need to do that since we want these animations to run at the same time we're actually just going to create an animation controller on the first parent page parents with class this case parent widget and control everything from there now to use an animation controller we need to have obviously a stateful widget but also we need to have a ticker provider ticker providers is what allows us to sync the frames per second going through the flirter application with the animations we want to do and so that the nav each the animation changes we actually see so the animation animation going through so in this case because we're only going to use one animation controller we're going to use a single ticker provider to save memory and processing power we don't need more than one if we did we just use a normal ticket provider state mix in but this is all we need at this money so I'm going to create here our animation controller and now we can't instantiate it directly here because it needs to reference to our our mix in here so if I tried to do it here animation controller and do it requires a vsync this it's trying to reference that's its own class and we can't do this before instance it's instantiated so instead of that we're going to do it in our unit state animation controller equals this so this is fine but then we want to add a few more properties here to our animation controller and it is the duration so we want to define how long your animation is going to last and we can do a bunch of things but I'm going to do in milliseconds I'm gonna say it's going to last 150 milliseconds now since we're doing an animation controller we need to dispose of it and to do that we need to over eyes the normal dispose methods of a stateful widget and adhere our animation controller that dispose this make sure we don't run into any memory issues now obviously every time you run the load this page you wants this this these title and the other animation to run so for that to happen we actually need to say that our animation controller will move forward once are in its state runs as soon as the state gets this widget the state for widget gets instantiated so now we have our animation controller we want to pass it down to our text and image and our bottom widgets their citrus widgets to run transitions inside them and animations they don't need to be stateful themselves only where the animation controller is is it need to be stateful so what we're gonna have we're going to have to do is come here and declare an animation controller a local one but that will receive we'll be received from the outside so let's do exactly that our let's do our instance you should you saw our constructor I mean and I'm gonna mark it as oops I'm going to mark this as required because I want to make sure that it's called and it notifies us if it's not present animation controller there we go that means now we get a notification here saying that we're missing a parameter that we've defined and so I'm gonna pass our animation controller from up there down here now it's missing I'm missing your final because it is stateless widget so it should be final all right so let's try something I'm going to add in our texts this is all I want to animate I don't want to animate the image right now so I'm going to just wrap this around with a widget I'm gonna do a fade transition here and to control the opacity we need animation and for that we just give it our animation controller that we're receiving from our parent widget now this just failed that's fine because we haven't given us the state we haven't refreshed their whole page or do a hot restart in this case but before we do that I'm gonna change this to a full second just so we're able to see the animation so let's go back here and let's click to see the Kitty and we still managed to catch that faith in after the animation happens so you'll notice something is that we only catch even though we put a second we only catch the end of the animation and this is because the transition from this first page into our second page has a duration itself and I believe it's around 200 milliseconds so what I'm going to do is add in a timer here which I'll need to to import the dart async library and now we have a timer I'm going to say that I want it to last 200 milliseconds and only then do I want to move our animation forward so I'm going to do exactly that pass on this method here let's save this and now I'm going to attempt to see the kitty and now our fade on happens once we once we go into the page and the first transition happens and this way only then do we get the faith now I can actually move it it to be a little bit faster let's see what happens yeah it's much nicer now now I don't want to do just as we mentioned before just to fade animation I actually want to add a fade transition I mean another transition which is a slides transition so the slide transition is a bit different because it requires not just to be passed on an animation controller in animation this case we have position but this actually if I try to just put here our enemy our animation controller it won't work we'll see that it gives us an error it's it needs an offset so for that we need to give it a tween and the tween in this case I'm gonna straightaway define it as an offset between and now we see that this tween has a beginning and an end for those of you who don't know you may look into the documentation but between is interpolation between a beginning and an end so it's like a range of numbers let's say for example in this case it is a range of offsets it starts at one value and it ends at the other and it goes all the ones in between so our animation controller will be syncing with the frames per second and as that goes it's going to advanced in the range that we've given it and so I'm going to say that our first offset is going to be an orifice ethics and X&Y chord number values in this case not exactly coordinates and what I'm going to say is I wanted to start at minus one so I wanted to start outside on the left side minus one is the left side of our viewing page and I wanted to have a zero for the y axis so X is minus one and Y is zero so it stays exactly in the same same areas that is vertically and now ends is going to be where we wanted to finish I wanted to finish where it started so I could do 0 0 but we actually have a different method here to just display a zero now this is all still showing us an error as we can see here because it still needs to be an animation but there is a method for that on our on our tween which is animate and this is where we're going to give animation controller now let's see what happens so we click here and there we go we get both the fade and the movement from outside into the into the viewer now I want to replicate this to our bottom side here on our emulator and to do that I'm going to do some copy-paste I'm gonna take this that we have here um first of all actually before we do that we're going to copy all of this part that we actually need for animation controller because we're going to need the same thing for our bottom edge it here just need to change the name here and now slide transition I'm gonna copy the same and I'm going to replicate what we've done before so in our top widget here I'm going to put it in a fade transition opacity give it an animation controller and then I'm gonna do this again with the helper here slide transition position I don't need to write it because we've pasted it in same thing differences now I don't want to use I don't want to have move it on the x-axis I want to have it on the y-axis and I'm gonna put one instead of minus one because I don't want it to come from above I want it to come from below our viewing viewing port here so let's do exactly that saved let's click back this obviously had an error because this is stateful and it didn't expect to have that information yet so once we click here opes actually I know what here is and this is obviously because I haven't passed our animation controller here so if I do exactly as we have above and now save you no longer have an error let's go back with click here and there we go we've got our animation we've got fate and slides in both of our animations let's see it's going fine maybe we could adjust the middle seconds a little bit but I think each person can do that to your own preference so that's about it that's it for today we do very simple animations fade and slide we've got a nice kitty and we get to see our our animations go through as soon as our first interaction first transition finishes thank you for watching ok

Channel: J. S.

Views: 24,388

Keywords: flutter, dart, animations, fadetransition, slidetransition, transitions, tutorial, beginner, mobile, native, ios, android, animationController, animation, animated, how to

Id: xIX9Bo_yjvo

Length: 11min 7sec (667 seconds)

Published: Mon May 25 2020