HOW TO Flutter - FadeTransition & SlideTransition

hello welcome to a new flutter video this is going to be a video about animations uh simple animations in this case we'll be going through fades and slides transitions um 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 a 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 style 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 the side it's going to come from the bottom into its final position here so let's get into it now i have the code here slightly separated so we've got a home page here we've got our second page in our second page then we have two stickles widgets which is a text and image that we have here on the emulator and then we have our bottom that we have down here just with the text with a little shadow just to look cute so let's start with that um we could use an animated animation controller uh 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 a an animation controller on the first parent page parent class in 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 thicker provider ticker provider is is what allows us to sync the frames per second going through the uh flutter application with the animations we want to do and so that the in each frame the animation changes to actually see so uh the dash image 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 and processing power we don't need more than one if we did we just use a normal ticker provider state mix-in but this is all we need at this mod 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 uh mix in here so if i tried to do it here animation controller and do it requires a v-sync this it's it's trying to reference uh the that's its own class and we can't do this before instant it's instantiated so instead of that we're going to do it in our init 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 longer animation is going to last and we can do a bunch of things but i'm going to do in milliseconds i'm going to 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 override the normal dispose method of a stateful widget and add here our animation controller that dispose this make sure we don't run into any memory issues and now obviously every time you run the load this page you want this uh this this 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 our enid state runs as soon as the state gets this widget the stateful widget gets instantiated so now we have our animation controller we want to pass it down to our text and image and our bottom uh widgets they're setless widgets to run transitions inside them and animations they don't need to be stateful themselves only uh where the animation controller is does it need to be stateful so all we're going to have we're going to have to do is come here and declare an animation controller a local one but that will receive will be received from the outside so let's do exactly that all right let's do our instantiation here so 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 uh not present animation controller there we go and that means now we get a notification here uh saying that we're missing a parameter that we've defined and so i'm going to pass our animation controller from up there down here now it's missing i'm missing a final because this is a 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 going to do a fade transition here and to control the opacity we need an animation and for that we just give it our animation controller that we're receiving from our parent widget now this this 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 going to 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 fade in after the animation happened so you'll notice uh 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 uh first page into our second page has the 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 tap to see the kitty and now our fade only happens once we once we go into the page and the first transition happens and this way only then do we get the fade now i can actually move 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 a fade animation i actually want to add a fake transition i mean another transition which is a slide transition so this slide transition is a bit different because it requires not just to be passed on an animation controller an animation in this case we have position but this actually if i try to just put here our anime our animation controller it won't work we'll see that it gives us an error it's uh 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 tween 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 this interpolation between a beginning and an end so it's like a range of 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 advance in the range that we've given it and so i'm going to say that our first offset is going to be an rf settings and x and y chord number values in this case not exactly coordinates and what i'm going to say is i want it to start at -1 so i want it to start outside on the left side minus 1 is the left side of our viewing page and i wanted to have a 0 for the y-axis so x is minus one and y is zero so it stays exactly in the same same area as it is vertically and now ends is going to be where we want it to finish i wanted to finish where it started so i could do zero zero but we actually have a different method here to just display 0. 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 it our 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 view 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 going to 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 widget here just need to change the name here and now for slide transition i'm going to 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 in a fade transition opacity give it a animation controller and then i'm going to do this again with the helper here slide transition position i don't need to write it because we've pasted in same thing differences now i don't want to use i don't want to move half move it on the x axis i want to have it on the y axis and i'm going to put 1 instead of -1 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 uh stateful and it didn't expect to have that information yet so once we click here oops i actually i know what the error 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 we no longer have an error let's go back we click here and there we go we've got our animation we've got a fade and a slides in both of our animations uh let's see it's going fine maybe we could adjust the milliseconds 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 i'll catch you another day

Channel: todo: fix code

Views: 1,411

Keywords: flutter, dart, animation, fade, slide, transition, programming, coding, code, native, android, ios

Id: 2yVWAbv6u_o

Length: 11min 7sec (667 seconds)

Published: Thu May 19 2022