Explore Lottie Animation In Flutter

Learn How To use Lottie Animation In Your Flutter Apps

Shaiq khan
Oct 10 · 6 min read
Image for post
Image for post

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.

Table Of Contents::

Lottie Animation

Lottie AnimationProperties

Implementation

Code Implement

Code File

Conclusion

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.

Image for post
Image for post

Then paste on your assets folder in your flutter project.

Image for post
Image for post

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: ^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 AndroidX

Add this to your grade.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 Center widget to put the animation on the screen. The Lottie.asset()add the JSON animation file and renders the animation.

Image for post
Image for post
  • > 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.

Image for post
Image for post

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.

Image for post
Image for post

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 its 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:

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 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.

Image for post
Image for post

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app