Flutter Lottie Animation Tutorial | Stunning Animations In Flutter Using Lottie

in today's video I'm going to be showing you guys how to implement stunning animations within your flutter application using lii lii is one of the largest animations database in the world and it's an excellent resource for developers looking to implement animations within their applications by the end of this tutorial you'll have an application where you'll be running an animation of two birds clapping with each other and you'll also learn how to programmatically run animations for Lotte by clicking on this Floating Action button and then a confetti animation appearing so to get started the first thing that we're going to be talking about are the dependencies for for this tutorial the only thing that you need to install as a package within your flutter application is going to be the L package and as a side note links to all of the resources that I mentioned within this video as well as a link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point so let's copy the ly dependency let's come back to our application let's go to pope.l then come down to where it says dependency and paste in the loty dependency then I'll let flutter pup gets do it magic and while this is happening what I'm going to be doing is now actually just giving a test run to my application to make sure that everything works as intended and there are no build issues while that's going on I'm going to let you guys know that you can come to app. lil.com and create a new account here and once you've registered an account log into your account and then you're going to be presented with this homepage here what you can do is actually go to the section which says free community animations because these are the animations that you can Implement for free without paying anything to L and then click on The View more button this is going to take you to a website called ltif files.com featured and here you can take a look at all of the animations that lty has to offer what I'm going to be doing is just showcasing you guys what you can do to actually get access to animations let's just say that I want to show an animation for waiting within my application so for that what I can do is maybe type in Waiting into the search bar search for it and then what's basically going to happen is that it's going to show me all of the different animations that are available on the loty database that I can add so so we can see that there's this bird thing that we can add that's the one that I like of this bird waiting so I can click on it and once I click on the actual animation a pop up is going to appear so what we're going to be doing here is that we can actually change the color of our animation here to select a new color palette you can for example select this color palette that'll change it but I'll reset it to the default one and once you've selected the color palette to your liking you can click on the download button what download is going to ask you to do is save this animation to workspace so it'll automatically create a workspace for you just add this actual animation to that workspace and once this is done it'll take you back to the actual website that you came from which is app. ltif files.com and here what you can do is now actually download the lty Json file for this actual animation so the two animations that I want to implement I am going to be going back to app. lil.com to my workspace for my first project and here what I'm going to be doing is actually downloading the ly Json files for the two animations that I like so in my case I want to download these birds clapping so I'll click on that then download the ly Json and then what I'm going to be doing after that is that I'll go back and I will select the next one which is this confetti animation and then click on LY Json and download it so once I have all of these animations downloaded I will minimize my browser window and we can come back to flutter here what I'm going to be doing is creating a new folder within the root of my project and I'm going to call this assets underneath of this I'm going to create a new folder called animations and then what I'm going to be doing is opening this folder up in finder then what I'm going to be doing is actually just dragging and dropping these animations in to my actual directory so what I'm going to be doing is copying the confetti. Jon and duck. Json animations you can rename the animation Json file to whatever you like I renamed them to my liking which is the confetti one for the confetti the DU one for the Ducks and now under my assets animations folder I have the confetti file and the ducks. Json file so now we have the animations within our flutter project now what I'm going to be doing is I'll stop running my application come to pspec DOL go down to the section which says assets under flutter and then basically add this directory to make these am animations available to my actual project so I'm going to do assets forward slash and then animations forward slash like so and do command save and that's pretty pretty much it so with this done we can actually come back to our project and start running the main do.art file and now everything should work and we should be able to access our L animations through the code from the actual folder that we've put them in so now that the application is running let's implement the code so to implement the code I have my homepage class which is a stateful widget Bare Bones the build function just Returns the scaffold for now so the first thing that I'm going to be doing is that for my scaffold I'm going to define the body property and I'm going to say it's going to be a call to a function called build UI like so and once this is done the next thing that I'm going to be doing is coming down saying that we'll return a widget for this function it'll be called build UI and then I'll open it up within this function for now what I'm going to be doing is returning a center widget because I'm going to be rendering the animation of the Ducks clapping in the center of the screen so I'll place my Lotty animation widget within a center widget add a child to it and then this child is going to be loty and then we can Define the actual Constructor so we can actually load ly files from assets from a file on our system from memory and from the networks so in this case we want to load asset files so I'm going to do ly. assets but the logic Remains the Same regardless of the source that you get your animation from so in this case now we can Define the asset so the asset if you remember correctly was assets forward slash animations and then forward slash it's going to be ducks. Json like so and then do command save so if I do this you're going to see that now the duck animation is appearing on the screen and it's running as I want it to so the next thing that I'm going to be doing is just showcasing you guys some generic parameters that you have on these Constructors to change the behavior of your animations the one that's really useful is the repeat option that allows you to repeat animations once they end so by default it's true if we set this to false to command save then what you're going to see is that the animation R once and stops if I set this to true then what's going to happen is that the animation keeps looping besides this we have a reverse option as well this basically as the name implies reverses the animation so if I do reverse true then it just reverses the animation um and we're going to be removing it and the last thing that I'm going to be showcasing you guys is how you can adjust the size of the animation so those are using the width property and the height property that are available on the actual Lotty widget so I'm going to set these to 250 and 250 do command save and this decreases the size of the Ducks so now that this is is done this is how to implement basic animations by just using ly files within your flutter application if you do not want any control on them but if you want control over your animations you want to maybe run them programmatically then the next section is for you where we're going to be adding the confetti now so to add the confetti the first thing that I'm going to be doing is that I'm actually going to be taking my Center widget and I'm going to be refactoring it and I'm going to be wrapping this with a column so a column has children then I'm going to be changing this column to be a stack and what the Stag basically allows us to do is that it allows us to play widgets one on top of another so what I want is all of the actual duck animations to be below the actual confetti animation so that's why I'm using a stack and then the children in the stack starting from the zero index are at the very bottom while the children at the last index is at the very top so now what I'm going to be doing after this is that I'm going to be adding a new widget here and this is going to be ly. asset and then this is going to be the asset which is the confetti one so let's do assets SL animations and then forward slash and I'm going to do confetti. Json like so to command save and there we go we now have the confetti animation appearing as I want it to so now that this is done the next thing that I'm going to be doing is actually showcasing you guys how we can actually adjust the behavior for this animation so the first thing I'm going to be doing now is that I'm going to be setting the width and the height property here to be this as you can see so the height of the screen and the width of the screen then once this is done the next thing that I'm going to be doing is that I'm going to be setting the fit property for this to be box fit and then I'm going to do dot cover so this is basically going to make the animation cover the entire width and height and once this is done the last thing that I'm going to be doing is setting the repeat property to false and then do command save so now the animation happens once and then it stops so now what I want to do is use some kind kind of a mechanism through which I can programmatically run this animation when I'd like so how do we do this well for that we need to give our loty animation in actual controller so if you actually go to the Constructor and try to add a controller property you can see that we can pass an animation controller here and then that can allow us to actually control the actual way our animation runs so what I'm going to be doing is that I'm going to be now going to the top of my homepage State class and I'm going to say that this is going to Implement a single ticker provider State mixing and once this is done then what I'm going to be doing is that I am basically going to be creating a variable which is going to be final type animation controller called controller then once this is done I'm going to create the init State function for my homepage State class and then underneath of this init State function I'm going to be setting my actual controller to a new instance of an animation controller so to do that I'll do controller equals to a new instance of our animation controller and weick property is going to be this and that's the reason why we had to basically add the single ticket provider State mixing to our homage State class and then after this I'm going to define the duration for our animation so how long do we want our animation to run so in this case you can experiment with it what I'm going to do is use durations do extra long for and that's pretty much it that's all we had to do so now that this is done I'm going to take my controller and I'm going to pass the that to my ly animation and do command save and then I'm going to restart my application because to begin with the actual controller is not going to be initialized so just restart the application and then finally we're going to be implementing a dispose function on our actual widget as well and then before the Super class gets disposed what I'll do is actually dispose the animation controller and this is just a good practice so now that this is done we are almost at the very end so the last thing that I'm going to be doing is coming to my scaffold adding a Flo floting action button and my floating action button is just going to be a normal Floating Action button widget and then on the onpress property for now it's going to be an empty function and then finally what I'm going to be doing is adding a child to my floating action button which is going to be an icon which is going to say playay Arrow like so then I'll come to my main do dot file just for the color scheme change this to Blue just to keep it in line with all of the apps color scheme come back to the homepage and now we're ready to actually run the logic within the onpressed off our Floating Action button that we want to run our animation so to run my animation on I'm going to be doing is creating a variable called ticker I'm going to be setting that equal toore controller. forbo and what this is going to do if we go back to my application and run it it's going to run the confetti animation but you see that it run once but it doesn't run again and the reason for that is because now we need to reset our controller so that's why I actually saved the return property which is a ticker future from the actual controller. forward function into a variable called ticker and then what I do is that I basically say that when the ticker gets completed then what I want to do is that I want to basically reset my controller so for that I'm going to doore controller. reset and this is basically going to allow me to run my animation again so now that this is done if I click on the play button you can see that the confetti animation happens click on it again and it happens again click on it again and it happens again and that's pretty much all you need to know to actually Implement L animations within your flut application so as always if you enjoyed the video then please don't forget to leave a like on the video and subscribe to my channel so that you get notified every time I release a new video and as always stay happy stay healthy keep learning keep gr and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 512

Keywords: flutter animation, flutter, flutter animations, flutter animation tutorial, flutter lottie animation, flutter lottie animation controller, flutter lottie files, add lottie animation flutter, lottie animation flutter, lottie animation splash screen flutter, how to use lottie animation in flutter, lottie animation ios, lottie animation android, flutter animation lottie, lottie in flutter, lottie json animation, lottie flutter package, flutter lottie example, lottie

Id: 3sIVBs6v5FE

Length: 12min 47sec (767 seconds)

Published: Sun Feb 18 2024