Lottie Animation — Flutter

3 min readSep 11, 2023

Do you perceive incorporating animations in Flutter as a daunting task? Fear not! Lottie Animation is here to streamline the process for you.

In this article, we will explore how to incorporate Lottie Animation in Flutter to enhance the visual appeal and awesomeness of our app!

For using Lottie Animation we need two things:

Lottie JSON file
Flutter lottie package

Let’s start

Add lottie flutter package
Download your favourite lottie JSON file and save it in assets

Add lottie packge in pubspec.yaml file and run flutter pub get

Now paste the following code in main.dart file in the lib/ directory

import 'package:flutter/material.dart';
import 'package:test/lottie_animation.dart';

void main() => runApp(
      const MyApp(),
    );

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Lottie Animation',
      home: LottieAnimation(),
    );
  }
}

create a file in lib/ directory as lottie_animation.dart and paste the following code

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

class LottieAnimation extends StatefulWidget {
  const LottieAnimation({super.key});

  @override
  State<LottieAnimation> createState() => _LottieAnimationState();
}

class _LottieAnimationState extends State<LottieAnimation> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Lottie Animation'),
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Lottie.asset('assets/json_animation_file.json'), //change file name accordingly
            ],
          ),
        ),
      ),
    );
  }
}

That’s it, you did it.

Continuously Animating? don’t worry. Let’s implement lottie on a button click.

First extends your lottie_animation class with TickerProviderStateMixin

class LottieAnimation extends StatefulWidget {
  const LottieAnimation({super.key});

  @override
  State<LottieAnimation> createState() => _LottieAnimationState();
}

class _LottieAnimationState extends State<LottieAnimation> with TickerProviderStateMixin{
}

Next create an AnimtionController to handle the Lottie Animation

class LottieAnimation extends StatefulWidget {
  const LottieAnimation({super.key});

  @override
  State<LottieAnimation> createState() => _LottieAnimationState();
}

class _LottieAnimationState extends State<LottieAnimation>
    with TickerProviderStateMixin {
  late AnimationController _lottieAnimationController;
}

Initialize _lottieAnimationController

@override  
void initState(){    
  _lottieAnimationController = AnimationController(vsync: this);  
}

Add the following Lottie Animation code in lottie_animation.dart file

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

class LottieAnimation extends StatefulWidget {
  const LottieAnimation({super.key});

  @override
  State<LottieAnimation> createState() => _LottieAnimationState();
}

class _LottieAnimationState extends State<LottieAnimation>
    with TickerProviderStateMixin {
  late AnimationController _lottieAnimationController;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GestureDetector(
        onTap: () => _lottieAnimationController.forward(),
        child: Center(
          child: Lottie.asset(
            'assets/json_animation_file.json',
            controller: _lottieAnimationController,
            height: 200.0,
            onLoaded: (composition) {
              _lottieAnimationController.duration = composition.duration;
            },
          ),
        ),
      ),
    );
  }
}

Great!! We have implemented Lottie Animation in Flutter

Lottie Animation — Flutter

Let’s start

Connect with me:

Written by Mohammad Usama