Bring Your Flutter App to Life with Lottie Animations
Tags: flutter, dart
Published: 2023-06-17 09:24:24

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](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](https://github.com/xvrh/lottie-flutter).

```
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!**