Lottie Animations in Flutter

FlutterGuide-Lottie Animations in Flutter

Learn How To use Lottie Animation In Your Flutter Apps

Animations in mobile applications play a huge role to enhance the end-user experience. It helps to express ideas and emotions in an easy way. Well-designed animations make a UI feel more intuitive, contribute to the slick look and feel of a polished app, and improve the user experience.

Also read: A Beginner’s Guide To Animations In Flutter

They are not only used for decorations but also used for functional role-play which makes the interface predictable for the users. Also, the app experience will be very pleasing because of easy navigation and controls.

The support of animation makes the interface of mobile applications which is no less than a cherry on the top.

There are lots of complexity and things to do to make a good animation. However, Flutter has an awesome library that allows you to make complex animations. It runs continuously at 60 frames for each second without any problem.

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! which works on Android, iOS, macOS, Linux, windows, and the web.

In this article, we will learn about the Lottie animation and its implementation in the Flutter app.

Let’s get started.

First, create a Flutter project.

Then add the Lottie package in pubspec.yaml file of your project.

dependencies:
  flutter:
    sdk: flutter
  lottie: ^1.2.1

Create a folder assets and add a lottie animation file.

We can create our own animation file or get free Lottie animation files from Lottie.

For now, Let’s download the free JSON animation file. We can download the animation files in different formats.

Add the animation file inside the assets folder.

And add your path of animation file in pubspec.yaml.

flutter:
  uses-material-design: true
  assets:
    - assets/animation.json

After that add the path of the animation file in the Lottie.asset widget in your code.

  body: Center(
        child: Lottie.asset(
          'assets/animation.json',
        ),
      ),

The result looks like this:

FlutterGuide - Flutter Animations Lottie
FlutterGuide – Flutter Animations Lottie

The animations can be loaded from a remote URL and zip file also.

 Lottie.network(
          'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json',
    ),
     
  Lottie.asset('assets/lottiefiles/angel.zip'),

Step 5: Give custom size for the Lottie animation.

The Lottie widget takes the same arguments and has the same behavior as the Image widget in terms of controlling its size.

 Lottie.asset(
          'assets/animation.json',
          height: 400,
          width: 400,
          fit: BoxFit.fill,
        ),

Full Code

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              title: const Text('Lottie Animations'),
            ),
            body: Column(children: [
              Lottie.asset(
                'assets/animation.json',
                height: 200,
              ),
              Lottie.asset(
                'assets/cooking.zip',
                height: 300,
              ),
              Lottie.network(
                'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json',
                height: 200,
              )
            ],
           ),
          ),
         );
  }
}

Final Result

FlutterGuide-Lottie-animations-in-Flutter
FlutterGuide-Lottie-animations-in-Flutter

❤ ❤ Thanks for reading this article ❤❤

Also Read: Hero Animation in Flutter.