Lottie Animations with Flutter | Part 1

I’ve always been interested in adding animations to my projects but I’ve always had the notion that it’s something very complicated. And perhaps it is/was, but I recently came across Lottie which I feel makes things a bit easier.

So, what is Lottie?

A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform as easily as shipping static assets — we are saved the pain of having to create these animations by hand. The files are small and they work on any device. They are easy to scale (up or down) without pixelation. It works on Android, iOS, macOS, linux, windows and web.

Some advantages of using Lottie

1. Easy to use — as mentioned above, the pain of creating these animations from scratch has been relieved. Thus, the animation process is significantly simplified in terms of time and effort needed by developers
2. Small files — Lottie is a JSON-based animation file thus the element of large file sizes with huge dimensions has been eliminated
3. Loading time — because the files are significantly smaller, the application loading time is greatly reduced. When one has large multimedia files, a lot of app resources are required to render them on the device hence leading to lags.
4. Platform agnostic — it has been designed to work across multiple platforms. It works on Android, iOS, macOS, linux, windows and web.
5. Controllable — you can easily control the animation within the code. You can choose how the animation reacts and responds based on a number of factors set.

Lottie tutorial

Create a new flutter project using the command below. I prefer this command as I get to also specify my flutter package name. See previous post on renaming your flutter package

flutter create — org com.flutter lottie_animation

In your pubspec.yaml, add the Lottie dependency. You can get the latest package version from https://pub.dev/packages/lottie

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  lottie: ^1.3.0

Run flutter pub get to download the package to the project.

Edit the main.dart file to remove the default starter code. When you run it the result is just a black screen as there is nothing our Container is returning.
Import the Lottie package as well.

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);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Create an assets folder/directory at the root of the application.

Go to lottiefiles.com to select your animation — You’ll probably need to create an account and sign in. There are thousands of animations to choose from, so select one that best fits your app theme/functionality. Search using specific keywords e.g. food, delivery, medical, sports… etc. Once you have your animation, click on Download > Lottie JSON

Add the JSON file to the assets folder created earlier.

In your pubspec.yaml, add path to the assets folder. Run flutter pub get to download the package to the project.

assets:
  - assets/shopping-cart.json

Now, all that’s left to do is use the animation in the code.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: Lottie.asset('assets/shopping-cart.json'),
        ),
      ),
    );
  }
}

And the result: a beautiful animation displayed on your screen!

Now, was that simple, or was it simple? I’d love to hear your thoughts.

That’s about it for part 1 of this Lottie animation tutorial — I hope you enjoyed it. In part 2, we’ll explore how to stop the animation and transition to a different view. Meanwhile, checkout the full project (as at part 1) on my GitHub.

As always, thank you for reading ❤