Bring Your Flutter App to Life with Lottie Animations

Imagine this - you’re using a mobile app and upon tapping a button, an explosion of colors and shapes springs to life on your screen. Such animations make applications not only visually appealing but also more intuitive and user-friendly. In this tutorial, I'll show you how to implement a delightful animation in your Flutter app using Lottie. I experimented with this by adding a simple animation for when someone marks a product as a favorite in my side project.

About Lottie:

If you are not familiar with Lottie, it is a library that renders Adobe After Effects animations in real-time, allowing apps to use animations as easily as they use static images. It has a vast collection of free animations. You can even modify colors and export them as JSON files.

Let's get started!

Step 1: Choose Your Animation

I selected this animation for my experiment: https://lottiefiles.com/91069-like

Step 2: Preview the Final Animation

Step 3: Setup the Animation Asset

Download the JSON file and add it to your assets folder. Additionally, specify the new asset in the pubspec.yaml file:

assets:
    - assets/favorite-animation.json

Step 4: Implement the Animation in Your Widget

For our animation to play and control its state, we need to convert our widget to stateful and set up an animation controller.

Here’s how we do it:

class _ProductListItemState extends State<ProductListItem>
    with TickerProviderStateMixin {
  late final AnimationController _lottieController;
  bool _isFavoriteAnimationPlaying = false;

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

In my widget, I have an IconButton. The animation should display above this button when a user taps it. It should play once and then disappear.

Here’s how you can modify the IconButton to set _isFavoriteAnimationPlaying to true when a user adds a product to favorites:

IconButton(
    padding: EdgeInsets.zero,
    constraints: const BoxConstraints(),
    onPressed: () {
        if (!widget.product.isFavorite) {
            setState(() {
                _isFavoriteAnimationPlaying = true;
            });
        }

        widget.onTapFavorite();
    },
    icon: Icon(
        widget.product.isFavorite
            ? Icons.favorite
            : Icons.favorite_border,
        color: Colors.amberAccent,
    ),
),

Step 5: Add Lottie to Your Dependencies

To use Lottie in our project, we need to add it to our dependencies. Don’t forget to check for the latest version on Lottie’s GitHub repository here.

dependencies:
  lottie: ^2.4.0

Step 6: Display the Animation

We'll use a stack and Positioned widget to place the Lottie animation in our app. This is pretty straightforward!

Here's the code:

Positioned(
    bottom: 20,
    left: 90,
    child: _isFavoriteAnimationPlaying
        ? Lottie.asset(
            'assets/favorite-animation.json',
            controller: _lottieController,
            onLoaded: (composition) {
                _lottieController.duration = composition.duration;
                _lottieController.addListener(() {
                    if (_lottieController.isCompleted) {
                        setState(() {
                            _isFavoriteAnimationPlaying = false;
                        });
                    }
                });
                _lottieController.forward(from: 0);
            },
            width: 100,
            height: 200,
        )
        : Container(),
),

This code snippet plays the animation once, and when it is completed, it sets _isFavoriteAnimationPlaying back to false to hide the animation.

Wrapping Up

There you have it! With just a few lines of code, you have successfully integrated a Lottie animation into your Flutter app, making it more dynamic and engaging.

Happy coding!