How to play Lottie file in Flutter

In this article I will show you how to play Lottie file in flutter.

What is Lottie ?

Lottie is a powerful animation format that allows you to render rich, vector-based animations in mobile apps, websites, and desktop applications. Developed by Airbnb, Lottie uses JSON files exported from Adobe After Effects , making animations lightweight, scalable, and easy to integrate.

Key Highlights of Lottie:

Lightweight & Scalable – Smaller than GIFs and videos, with no loss of quality when resized.
Cross-Platform Support – Works seamlessly on iOS, Android, Flutter, React Native, and Web.
Interactive Animations – Can respond to gestures, app states, or user actions.
Easy Integration – Libraries like lottie-web, lottie-ios, and lottie-flutter simplify usage.
Enhances User Experience – Perfect for micro-animations, loading screens, onboarding flows, and dynamic icons.

Where Lottie is Used:

Loading animations and progress indicators.
App onboarding experiences.
Animated icons and buttons.
Micro-interactions to improve UI/UX.

Here is step by step guide to play Lottie Images in flutter . To play lottie file in flutter app you need to add lottie package .

Add Dependency

Add in your pubspec.yaml file

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.8
  lottie: ^3.3.2

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.8
  lottie: ^3.3.2

After that Save the file or run:

flutter pub get

flutter pub get

Add Lottie file

If you have lottie file in JSON format you can add it to the assets folder . Otherwise you can check my github and copy the smile.json lottie file to assets/animations directory . Then update the pubspec.yaml file and save it .

flutter:

  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/animations/

flutter:

  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/animations/

Import the package

import 'package:lottie/lottie.dart';

import 'package:lottie/lottie.dart';

How to play Lottie Image in Flutter from Assets

Lottie.asset(
  'assets/animations/smile.json',
  width: 200,
  height: 200,
  repeat: true,
  animate: true,
)

Lottie.asset(
  'assets/animations/smile.json',
  width: 200,
  height: 200,
  repeat: true,
  animate: true,
)

How to play Lottie Image in Flutter from Network

Lottie.network(
  'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json',
  width: 200,
  height: 200,
  repeat: true,
)

Lottie.network(
  'https://raw.githubusercontent.com/xvrh/lottie-flutter/master/example/assets/Mobilo/A.json',
  width: 200,
  height: 200,
  repeat: true,
)

To play from network you need to add some line in your “android/app/src/main/AndroidManifest.xml” file

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET"/> <!-- add this -->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />  <!-- add this -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />  <!-- add this -->
    <application>
    
    ......
    
    </application>

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<uses-permission android:name="android.permission.INTERNET"/> <!-- add this -->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />  <!-- add this -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />  <!-- add this -->
    <application>
    
    ......
    
    </application>

If you like this article , please like , comment and share the article . You can also buy me a coffee.