A Lottie is a JSON-based animation file format. The Lottie animation files can be used in cross-platform applications as static assets.
In this shot, you’ll be learning to display a Lottie animation in the center of the screen via the HTTP URL.
The Flutter package lottie needs to be added in pubspec.yaml
, as shown below:
dependencies:
flutter:
sdk: flutter
//add lottie dependency
lottie: ^0.4.1
Lottie files are a simple Flutter app with only one page. The screen has an app bar and Center
widget to place the animation in the middle of the screen. The Lottie.network()
takes the URL of the JSON animation file and renders the animation.
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
//Entry point to LottieDemoApp
void main() => runApp(LottieDemoApp());
class LottieDemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("Lottie Demo"),
),
//Animation is
body: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
//Lottie animation is added a child widget
child: Lottie.network("https://assets5.lottiefiles.com/packages/lf20_HX0isy.json"),
),
),
),
),
);
}
}
You can see Lottie animation by Andrea Del Latte here.