Flutter Lottie Animation with Example

Lottie is a library for Android, iOS, and Web that allows you to render After Effects animations in real-time. With Flutter, you can easily add Lottie animations to your app using the Lottie Flutter package. In this blog post, we will explore how to use Lottie animations in Flutter.

Step 1: Adding the Lottie Package

First, we need to add the Lottie Flutter package to our project. To do this, add the following dependency to your pubspec.yaml file:

dependencies:
  lottie: ^1.1.0​

Next, run flutter pub get to install the package.

Step 2: Adding the Lottie Animation

Next, we will add a Lottie animation to our Flutter app. We will use the Lottie.asset widget to load the animation from an asset file.

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class LottieAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lottie Animation'),
      ),
      body: Center(
        child: Lottie.asset('assets/animations/loading.json'),
      ),
    );
  }
}​

In this code, we have created a LottieAnimation widget that displays a Lottie animation in the center of the screen. We have used the Lottie.asset widget to load the animation from an asset file called loading.json. You can replace this with your own Lottie animation file.

Step 3: Controlling the Lottie Animation

You can control the Lottie animation using the LottieController class. To do this, first, we need to create a LottieController object and assign it to the controller property of the Lottie.asset widget.

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class LottieAnimation extends StatefulWidget {
  @override
  _LottieAnimationState createState() => _LottieAnimationState();
}
class _LottieAnimationState extends State<LottieAnimation> {
  LottieController _controller;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Lottie Animation'),
      ),
      body: Center(
        child: Lottie.asset(
          'assets/animations/loading.json',
          controller: _controller,
          onLoaded: (composition) {
            _controller
              ..duration = composition.duration
              ..forward();
          },
        ),
      ),
    );
  }
  @override
  void initState() {
    super.initState();
    _controller = LottieController();
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}​

In this code, we have added a LottieController object to our LottieAnimation widget. We have assigned the controller to the controller property of the Lottie.asset widget. We have also added an onLoaded callback to the Lottie.asset widget. This callback is called when the animation is loaded, and we use it to set the duration of the animation and start it.

We have also added the initState and dispose methods to create and dispose of the LottieController object.

Conclusion

We have explored how to use Lottie animations in Flutter using the Lottie Flutter package. With Lottie, you can easily add engaging and interactive animations to your Flutter app.