CODEWITHSUNDEEP
animationflutterlottie
rahul Kushwaha
rahul Kushwaha

Reputation: 2819

How to use lottie animation in flutter app?

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?

Upvotes: 10

Views: 14465

Answers (2)

hosein moradi
hosein moradi

Reputation: 492

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'),
      ],
    ),
  ),
);
}
}

Upvotes: 2

Xavier
Xavier

Reputation: 4005

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

Upvotes: 8

Related Questions