Lottie Package

One of the challenges of developing mobile applications is creating animations that are smooth and engaging. One solution to this problem is the use of Lottie, a library that provides animations as JSON files. The Lottie library can be easily integrated into a Flutter project using the lottie package.

In this article, we will explore the Lottie library and how to use it in a Flutter project. We will cover the following topics:

  1. What is Lottie?
  2. Installing the Lottie package
  3. Adding a Lottie animation to a Flutter project
  4. Controlling a Lottie animation
  5. Using Lottie animations with different devices
  6. Creating custom Lottie animations

What is Lottie?

Lottie is an open-source library that provides animations as JSON files. These animations can be created using Adobe After Effects, exported as JSON files, and then used in mobile applications. Lottie supports a variety of animations, including shape layers, images, text, and masks. It also supports animation features such as easing, time remapping, and looping.

Lottie is designed to provide smooth and high-quality animations, while also being lightweight and easily scalable. It can be used on both iOS and Android platforms, as well as on the web.

2. Installing the Lottie package

To use Lottie in a Flutter project, we need to install the lottie package. We can do this by adding the following line to the dependencies section in the pubspec.yaml file:

dependencies:
  lottie: ^1.1.0

After adding this line, we need to run flutter packages get to install the package.

3. Adding a Lottie animation to a Flutter project

Once the package is installed, we can add a Lottie animation to our Flutter project. We can do this by creating a Lottie.asset widget and passing the path to the JSON file that contains the animation. Here is an example:

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Lottie Demo"),
      ),
      body: Center(
        child: Lottie.asset(
          'assets/animations/sample_animation.json',
        ),
      ),
    );
  }
}

4. Controlling a Lottie Animation

The Lottie package provides various methods for controlling the playback of a Lottie animation. Some of the common ones are:

  • controller.forward() – Starts playing the animation from the beginning to the end.
  • controller.reverse() – Plays the animation in reverse order, from the end to the beginning.
  • controller.repeat() – Loops the animation continuously.
  • controller.stop() – Stops the animation.

Let’s create a simple example to demonstrate how to control a Lottie animation using the AnimationController class.

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

class LottieControlApp extends StatefulWidget {
  @override
  _LottieControlAppState createState() => _LottieControlAppState();
}

class _LottieControlAppState extends State<LottieControlApp>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  bool _isPlaying = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _togglePlay() {
    setState(() {
      _isPlaying = !_isPlaying;
      if (_isPlaying) {
        _controller.forward();
      } else {
        _controller.stop();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Lottie Control')),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Lottie.asset(
            'assets/animations/playing_card.json',
            controller: _controller,
            onLoaded: (composition) {
              _controller.duration = composition.duration;
            },
          ),
          SizedBox(height: 24),
          ElevatedButton(
            onPressed: _togglePlay,
            child: Text(_isPlaying ? 'Pause' : 'Play'),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(home: LottieControlApp()));
}

In the example above, we first import the flutter_lottie package. Next, we create a stateful widget LottieControlApp, which creates an AnimationController and a boolean _isPlaying to track the animation state.

In the initState method, we create a new instance of AnimationController with vsync set to this. The vsync parameter is set to this because we’re using SingleTickerProviderStateMixin.

In the dispose method, we dispose of the AnimationController instance to prevent memory leaks.

Next, we define the _togglePlay method, which is called when the user presses the play/pause button. In this method, we toggle the _isPlaying boolean value and then call the appropriate AnimationController method based on the value of _isPlaying.

Finally, we create the UI for the app in the build method. We use the Lottie.asset widget to display the animation, passing in the path to the animation file and the AnimationController instance. We also define an onLoaded callback that sets the duration of the animation on the controller. Below the animation, we have an ElevatedButton widget that calls the _togglePlay method when pressed.

5. Using Lottie animations with different devices

When using Lottie animations in Flutter, it is essential to ensure that the animations are optimized for different devices. This is because some devices may not support certain animation features or may not have the same level of hardware capabilities.

To optimize Lottie animations for different devices, there are several things you can do:

  • Reduce the complexity of your animations: This can be achieved by reducing the number of layers, using simpler shapes, or using fewer animations.
  • Use the correct Lottie animation file format: Lottie animations can be exported in different file formats, including JSON, JSON with images, and JSON with glyph data. Make sure to choose the correct format based on your needs.
  • Use the appropriate Lottie animation file version: Lottie animations can be exported in different versions, and some versions may not be compatible with certain devices. Make sure to choose the appropriate version based on the devices you are targeting.
  • Test your Lottie animations on different devices: This will help you identify any compatibility issues and optimize your animations accordingly.

6. Creating custom Lottie animations

In addition to using pre-built Lottie animations, you can also create your own custom animations using Adobe After Effects or similar animation software. Here are the steps to follow:

  • Design your animation in Adobe After Effects or similar software.
  • Install the Lottie plugin for After Effects.
  • Export your animation as a Lottie JSON file.
  • Import the Lottie JSON file into your Flutter project using the Lottie package.
  • Use the Lottie widget to display your custom animation in your Flutter app.

Here’s an example of how to use the Lottie widget to display a custom animation:

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

class CustomAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Lottie.asset(
        'assets/custom_animation.json',
        width: 200,
        height: 200,
        fit: BoxFit.fill,
      ),
    );
  }
}

In this example, we are using the Lottie.asset() method to load a custom Lottie animation from the assets folder in our Flutter project. We are also specifying the width, height, and fit of the animation.

Overall, the Lottie package provides a powerful tool for adding high-quality animations to your Flutter apps. By optimizing your animations for different devices and creating custom animations, you can create engaging and interactive user experiences that will help your app stand out.