Animations in a mobile application add intelligence to the UI just as some enhanced visualizations to it. Animations, when utilized effectively, can have a gigantic effect on how the user sees your application. Each mobile developer wishes to include animations in their application; however, they are unsuccessful in doing as such, because there is a ton of complexity and a ton of things a developer needs to learn before including animations.

Flutter has an awesome Animation library that permits you to make complex animations that can run continuously at 60 frames for each second without any problem.

In this article, we will Explore Lottie Animation In Flutter. We will also implement a demo of Lottie animation using the lottie package in your flutter applications.

Lottie Animation

A Lottie is a JSON-based animation file format. The Lottie animation files can be utilized in cross-platform applications as static assets.

Generally, all beginners have a similar inquiry; that is why we use Lottie Animation when flutter gives many animation widgets that are more simple to use than the Lottie animation movement.

Lottie is a widget which gives cool animation which makes the application more appealing; Lottie libraries and modules accessible with the expectation of complimentary Web, iOS, Android, Flutter, React Native, Xamarin, Native Script, Windows, Vue, Angular, QT, Skia, Framer X, Sketch for free.

Without much of a stretch, we can get the Lottie animation file from https://lottiefiles.com and can utilize it in our application.

Note: You will download Lottie animation files in Lottie json format only.

Then paste on your assets folder in your flutter project.

Lottie Animation — Properties

There are some properties of Lottie animation are:

• Reverse: Thisproperty is used to reverse the motion in the animation.

• Repeat: This property is used to keep repeating the animation. You will use false, then repeat animation will be stopped.

• Animate: Thisproperty is used to animate the motion in the animation.

Implementation:

Step 1: Add the dependencies

Add dependencies to pubspec — yaml file.

dependencies:

lottie: ^0.6.0

Step 2: Import

import 'package:lottie/lottie.dart';

Step 3: Add Assets

Add assets to pubspec — yaml file.

We will add images in the assets folder.

assets:
  - assets/

Step 4: Run Flutter packages get in the root directory of your app.

Step 5: Enable AndriodX

Add this to your grade.properties file:

org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true

#flutter #dart #mobile-apps #programming #developer