How to use lottie animation in flutter app?

Question

I want to animate the Lottie file in the flutter app. I tried searching every corner of the internet and failed to find any info on it.

I found out that there is a flutter package "flutter_lottie.dart" and has a function to animate.

There is also an example provided by the author about the usage of the flutter_lottie.dart

but this I tried running the exact example : flutter Lottie example

and it gave the same error:

Creating Method Channel convictiontech/flutter_lottie_0
E/flutter (11371): [ERROR:flutter/shell/common/shell.cc(199)] Dart Error: Unhandled exception:
E/flutter (11371): PlatformException(error, java.lang.IllegalStateException: Unable to parse 
composition
E/flutter (11371):  at com.airbnb.lottie.LottieAnimationView$2.onResult(LottieAnimationView.java:68)

How to use animate using Lottie in flutter?

Neil

did you add flutter lottie package to your project ? link – Amagasaki

yes! it's there – Neil

you can use rive instead of lottie it`s very better than lottie and has an online editor you can import your lottie file to this platform and export it as rive rive.app add this package pub.dev/packages/flare_flutter and follow this tutorial medium.com/flutterdevs/… – Amagasaki

yes! I can do that but I need to develop the animation in after effects and place it in flutter app. – Neil

exactly you can develop animations in after effect and export your animation as flottie then import flottie animation in rive and export as flare format – Amagasaki

what is flottie. can you provide the link? – Neil

sry i mean lottie – Amagasaki

ok, but how to import Lottie to rive, I tried but the animation won't play! – Neil

check this link – Amagasaki

I tried this, the animation won't play. I am dragging the JSON file from Lottie to rive and then again dragging the imported file to the canvas. Now it shows the shapes but animation not playing. – Neil

do you go to animation tab ? you should go to animation tab select animation and then click play – Amagasaki

can you make this work! lottiefiles.com/15130-linkedin-logo – Neil

yeah but 5 hours later – Amagasaki

ok! I this only this file has a problem, some works but some don't. – Neil

lottie is not stable in flutter i have many problem with lotties but rive is a great animation platform for flutter and i suggest you to learn work with rive – Amagasaki

rive.app/a/veneno/files/flare/linkedin/preview – Amagasaki

Answer 1

The lottie package is a pure Flutter/Dart implementation of a Lottie Player.
It is a direct port of Lottie-Android and support the same set of features.

Include this in your pubspec.yaml

dependencies:
  lottie:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Lottie.asset('assets/lottiefile.json'),
      ),
    );
  }
}

Pub: https://pub.dev/packages/lottie
Github: https://github.com/xvrh/lottie-flutter

Evidentiary

what does this means This repository is a unofficial conversion of the Lottie-android library in pure Dart. in the pub? – Neil

The library is a direct port of Lottie-Android: the Java code was copied file-by-file and converted to Dart/Flutter (no architecture change). Unofficial: I don't have any contact with the original author – Evidentiary

This docs also say, The performance is not great and some features are missing.. I want to show a lot of animation, can I rely on this? – Neil

That part of the doc is related to Web compilation. For iOS/Android, the performance should be ok (similar to the original libraries). The performance really depends on the animation itself. Some animations are really expensive (with lots of elements, lots of gradients etc...) some are really cheap to draw. Please experiment with it and report any problem you have. – Evidentiary

how to load lottie files before the app run i have used didchangedepenedencies but getting some error – Franky

Answer 2

you can animation download in gif format from lottiefiles website and open with Image.assets or in json format

class MyApp extends StatelessWidget {
   @override
 Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      body: ListView(
      children: [
        // Load a Lottie file from your assets
        Lottie.asset('assets/LottieLogo1.json'),

        // Load a Lottie file from a remote url
        Lottie.network(
            'https://raw.githubusercontent.com/xvrh/lottie- 
       flutter/master/example/assets/Mobilo/A.json'),

        // Load an animation and its images from a zip file
        Lottie.asset('assets/lottiefiles/angel.zip'),
      ],
    ),
  ),
);
}
}

Monumental

I have a lottie in folder, assets/lottie/lottie.json, but I got an error unable to load asset, how do I fix it ? – Ebneter

You must add assets to pubspec.xml – Monumental

@RohmatulLaily Did you path the file and add it to the pubspec.yaml? – Monumental