10

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?

ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ
  • 464
  • 4
  • 18
rahul Kushwaha
  • 2,395
  • 7
  • 32
  • 64
  • did you add flutter lottie package to your project ? [link](https://pub.dev/packages/flutter_lottie) – Amir Feb 08 '20 at 07:06
  • yes! it's there – rahul Kushwaha Feb 08 '20 at 07:14
  • 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 https://rive.app/ add this package https://pub.dev/packages/flare_flutter and follow this tutorial https://medium.com/flutterdevs/flutter-animation-with-flare-3863e8ff5030 – Amir Feb 08 '20 at 07:24
  • yes! I can do that but I need to develop the animation in after effects and place it in flutter app. – rahul Kushwaha Feb 08 '20 at 10:56
  • 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 – Amir Feb 08 '20 at 11:16
  • what is flottie. can you provide the link? – rahul Kushwaha Feb 08 '20 at 12:10
  • sry i mean lottie – Amir Feb 08 '20 at 12:11
  • ok, but how to import Lottie to rive, I tried but the animation won't play! – rahul Kushwaha Feb 08 '20 at 12:18
  • check this [link](https://twitter.com/rive_app/status/1169294765625618432?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1169295889027874816&ref_url=https%3A%2F%2Fwww.redditmedia.com%2Fmediaembed%2Fcznvcp%3Fresponsive%3Dtrue%26is_nightmode%3Dfalse) – Amir Feb 08 '20 at 12:23
  • 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. – rahul Kushwaha Feb 08 '20 at 12:35
  • do you go to animation tab ? you should go to animation tab select animation and then click play – Amir Feb 08 '20 at 12:44
  • can you make this work! https://lottiefiles.com/15130-linkedin-logo – rahul Kushwaha Feb 08 '20 at 13:05
  • yeah but 5 hours later – Amir Feb 08 '20 at 13:07
  • ok! I this only this file has a problem, some works but some don't. – rahul Kushwaha Feb 08 '20 at 13:21
  • 1
    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 – Amir Feb 08 '20 at 13:27
  • 1
    https://rive.app/a/veneno/files/flare/linkedin/preview – Amir Feb 08 '20 at 16:31

2 Answers2

8

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

Xavier
  • 3,647
  • 24
  • 17
  • what does this means `This repository is a unofficial conversion of the Lottie-android library in pure Dart.` in the pub? – rahul Kushwaha Mar 28 '20 at 17:38
  • 1
    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 – Xavier Mar 28 '20 at 17:45
  • 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? – rahul Kushwaha Mar 28 '20 at 17:48
  • 1
    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. – Xavier Mar 28 '20 at 17:56
  • how to load lottie files before the app run i have used didchangedepenedencies but getting some error – ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ Aug 27 '22 at 07:28
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'),
      ],
    ),
  ),
);
}
}
hosein moradi
  • 444
  • 3
  • 7