Lottie Animation

 

Hello, dear readers. My name is Bekzod Kuvondikov and I am a junior year student at Inha University in Tasheknt. My blog is aimed to provide you with incredible features of Flutter. 
Nowadays, I am junior flutter mobile application developer in IT-company called Udevs, which exists from 2019 year. 

Animations are one of the bright unique sides of Flutter. Many other frameworks are avoiding of using, such difficult animations, because of their tons of complexities. 

Flutter solved this problem, by presenting awesome Animation library that permits you to make complex animations that can run continuously at 60 frames for each second without any problem. Mobile applications would be beautified by including Lottie Animation. 

Let's introduce lottie from Zero to Hero

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

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

Lottie Animation Properties:

    ->     Reverse: to reverse the motion in the animation;

    ->     Repeat: to keep repeating the animation. Using false will stop repetition;

    ->     Animate: to animate motion in the animation;

Step - by - Step Implementation:

Step 1: Add the dependencies

| Add the dependencies to pubspec.yaml file in your project

    dependencies:

        lottie: ^0.6.0 

Step 2: Import into .dart file

    import 'package:lottie/lottie.dart'; 

Step 3: Add assets in pubspec-yaml file

    assets:

        -assets/  

Step 4: Enable AndroidX

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

Lottie Implementing in dart file:

| Create new dart file called new_lottie.dart in lib directory

Lottie can be used via two methods or lottie files can be implemented by 2 ways:

    -> Assets 

Example:

    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

    

Example:

    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:

Today, I tried to direct you into flutter world deeper, by presenting using Animations and displaying resultant view of our Lottie animations. 

I hope this blog will motivate you to learn more about flutter's UI animations. You can use and modify this code according to your needs.

❤ ❤ Thanks for reading this article ❤❤