Hii guys today we learn how to implement Lottie Animation in the flutter project. Animations can greatly glorify an app’s UI, but animations can be hectic to implement for an application. Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with BodyMovin and renders them natively on mobile. A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation. LottieFiles lets you create, edit, test, collaborate and ship a Lottie in the easiest way possible. In this article, we implement Lottie Animation easily and best way.
Step 1: First you add lottie animation packege in your project for implement Lottie Animation in the flutter project.
dependencies:
lottie: ^2.0.0
Step2: Crete your LottieAnimation.dart class
import 'package:flutter/material.dart';
class LottieAnimation extends StatelessWidget {
const LottieAnimation({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold();
}
}
Step3: Implement Lottie files inside the Column widgets
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class LottieAnimation extends StatelessWidget {
const LottieAnimation({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text('Lottie Animation'),
),
body: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Lottie.network('https://assets4.lottiefiles.com/packages/lf20_Au6z826BEy.json'),
Lottie.network('https://assets6.lottiefiles.com/packages/lf20_dFqqfQW5yd.json'),
Lottie.network('https://assets3.lottiefiles.com/packages/lf20_UGvCSC/loading_animation.json'),
Lottie.network('https://assets6.lottiefiles.com/packages/lf20_O2ci8jA9QF.json'),
Lottie.network('https://assets6.lottiefiles.com/packages/lf20_DXljHQsLLA.json'),
],
),
),
),
);
}
}
Outpyt
Conclusion
In this article, we learn how to implement Lottie Animation best and easy way in your project to better and more attractive app UI. You can use Lottery on basically any platform: web or mobile. This means you can integrate them seamlessly into both apps and web pages. Lottie animations can also be used as stickers on messaging platforms. It’s not technically limited to web and mobile. You can use it with desktop apps as well as on some watches
