[Music] the past four episodes of this series you learned about all the practical ways to build animations in flutter not so in this video here you'll learn how to implement animations in the least pragmatic way imaginable but you'll also learn some things along the way let's start with something simple and light-hearted Buddhist motion really motion is an illusion see this it is a lie what you're actually seeing are many still images shown in quick succession this is how movies work the individual pictures are called frames and cinema and since digital screens work similarly they're called
frames even here cinema normally works at 24 frames per second modern digital devices show 60 or 120 frames per second so if motion is a lie what are all these animation food and food transitions which it's really doing surely since the frames need to be constructed up to 120 times per second the UI cannot be just rebuilt every time or can it in fact animations in flutter are just a way to rebuild parts of your widget tree on every frame there is no special case flare is fast enough to do that let's look at animated
builder that Emily talked about in the previous episode animated builder is an animated widget which is backed by animated State in the States in its state method we're listening on the animation or listenable as it is called here and when it changes its value we whole set state there you go animations in four are just a quick succession of changing the state of some widget 60 or 120 times per second I can prove it here's an animation that animates from zero to the speed of light although it's changing the text on every frame from forest
perspective it's just another animation let's use forest animation framework to build that animation from first principles normally we would use strean animation builder or something similar but in this video we'll ignore all that and go with a ticker controller and set state let's talk about ticker first 99% of the time you won't be using it directly but I think it's still helpful to talk about it even if only to demystify it ticker is an object that calls a function every frame in this case we're printing hello every frame admittedly that's not very useful also we
forgot to call ticker that disposed so now our ticker will go on forever until we kill the app that's why flutter gives you single ticker provider state mixin the aptly named mixin you've seen in some of the previous videos this makes in takes care of the hassle of managing your ticker just slap it onto your widget state and now your state is secretly a ticker provider what this means is that the flutter framework can ask it for a ticker most importantly animation controller can ask it for a ticker animation controller needs a ticker for it
to function if you use single ticker provider state mixing or it's your cousin ticker provider state mixin you can just give this to the animation controller and you're done animation controller is what you normally use to play pause reverse and stop animations instead of pure tic events it tells us at which point of the animation we are at any time for example are we halfway there are we 99% there have we completed the animation normally you take the animation controller maybe transform it with a curve put it through a tween and use it in one
of the handy widgets like fade transition or tween animation builder but for educational purposes let's not do that instead we will directly call set state after we initialize the animation controller we can add a listener to it and in that listener we call set States now we should probably have some state to set let's keep it simple with an integer and let's not forget to actually use it in our build method and to change it in our listener according to the current value of the controller this code will assign a value from 0 to the
speed of light depending on the animations progress there and now we just need to tell the animation how long it should take to complete and start the animation the widget animates as soon as it's added to the screen and it animates from zero to the speed of light in a second oh and don't forget to dispose of the animation controller as you can see doing it all by yourself is not great the exact same functionality can be achieved with the tween animation builder in much fewer lines of code and without having to juggle with an
animation controller and calling set slate so once again don't do this there are easier ways to animate this was just a deep dive into the building blocks of the floor animation framework we saw what tickle really is we saw how to manually listen to an animation controller and we saw that at the basic level animations are just fast consecutive results of a widget you can do whatever you want on any frame this almost concludes this animation series there's one more video which will help you determine when to go with what animation approach so stay tuned
[Music] you
