![]() ![]() Make sure you use the SingleTickerProviderMixin with your class to use the vsync function in the AnimationController. TODO: implement initState super.initState() Ĭontroller = AnimationController(vsync: this,duration:Duration( seconds: 1)) Late final AnimationController controller // our animation override bool isLiked = false // the boolean which tells the current state of animation So let's add these two things to our code. We will also need a boolean which tells us the current state of the animation. Since we are trying to interact with this emoji, we will need something to control it. Now get the URL of this animation and add it to your work("the URL"). This package is a pure Dart implementation of a Lottie player. Tap here to get the exact animation that I have used. lottie Null safety 2.97K Maintenance Status: Good Render After Effects animations natively on Flutter. I mean the app will become much better if we could interact with animations, wouldn't it? So now, we will create an interactive animation.įor this part, I will take a heart button animation. The kind of animation we used above can be useful in your onboarding pages. Now run your app and see if the animation has loaded successfully or not. This is literally all you need to do to add a Lottie animation in your app. If you don't want to do all this hard work then simply copy the URL and paste it like this in your app. A JSON file will be downloaded and then you can add it in your assets folder. When you tap on the download button, you will get multiple options. One is download and the second is Lottie animation URL. Lottie from Scratch Bezier Curves Precompositions Lottie Format. When you go to the Lottie website and in the animations tab, tap on any animation and there you will see two options. One is by using a URL and the second is by using an asset. Now, there are 2 ways to render the animation in your app. Now in your dart file where you are planning to code the logic, import the package like this. Project Setupįirst of all, we will need to add the Lottie package to the pubspec file of our project. So let's see how we can add Lottie animations to our Flutter app. We also have a package called Lottie which makes the integration with Flutter super easy. Lottie is a third-party website that provides readymade animations. It has been made possible with the help of Lottie. ![]() Follow these steps to add lottie animation in your flutter app. In todays' article, we are going to have a look at how you can render some amazing animations in your Flutter app with just 5 lines of code probably. Answer (1 of 2): How to use Lottie Animation in Flutter Here is the answer. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |