Explore Lottie Animation In Flutter
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 | Flutter Package
Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as json with…pub.dev
Table Of Contents::
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 that 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.
LottieFiles – Free animation files built for Lottie
Loved by Designers & Engineers from Discover thousands of free animations for your products Most loved animators this…lottiefiles.com
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: This property 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: This property is used to animate the motion in the animation.
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
lottie: ^latets version
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 AndroidX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called lottie_page.dart inside the lib folder.
In Lottie files, you will add lottie json file in two types:
- Asset
- Network
- > Asset
Lottie.asset(
'assets/lottie_file.json',
repeat: false,
reverse: false,
animate: false,
),
Lottie files are a straightforward Flutter application with just one page. The screen has an app bar and a Center widget to put the animation on the screen. The Lottie.asset()add the JSON animation file and renders the animation.
- > Network
Lottie.network(
'https://assets8.lottiefiles.com/packages/lf20_HX0isy.json',
repeat: false,
reverse: false,
animate: false,
),
The Lottie.network() takes the URL of the JSON animation file and renders the animation. We will false repeat, reverse, and animate.
Code File
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class LottiePage extends StatefulWidget {
@override
_LottiePageState createState() => _LottiePageState();
}
class _LottiePageState extends State<LottiePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Flutter Lottie Animation Demo"),
automaticallyImplyLeading: false,
centerTitle: true,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Lottie.asset(
'assets/lottie_file.json',
repeat: true,
reverse: true,
animate: true,
),
Lottie.network(
'https://assets8.lottiefiles.com/packages/lf20_HX0isy.json',
repeat: true,
reverse: true,
animate: true,
),
],
),
),
);
}
}
You will see a full code on a GitHub, and this is a small demo program to use lottie animation; and the below video shows how lottie animation will work in your flutter applications.
Conclusion :
In the article, I have explained the basic architecture of Lottie Animation; you can modify this code according to your choice. This was a small introduction to Lottie Animation from my side and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up Lottie Animation in your flutter projects. This is a demo program to use lottie animation in a flutter and show how lottie animation will work in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Lottie Animation Demo:
flutter-devs/flutter_lottie_animation_demo
GitHub is home to over 50 million developers working together to host and review code, manage projects, and build…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
