flutter_lottie_plus 0.3.16

  • Readme
  • Changelog
  • Example
  • Installing
  • 82

flutter_lottie #

Use Lottie in Flutter.

Supports both iOS and Android using lottie-ios and lottie-android

Current Status #

Supports most features that both iOS and Android support.

The only dynamic property changing that is supported for now is color and opacity. Project will be updated later to include support for other properties.

Example in the github repo includes a good intro into using the library.

IMPORTANT NOTE #

To use with iOS, you will need to add this key to your info.plist file located in: project/ios/Runner/Info.plist

<key>io.flutter.embedded_views_preview</key>
<true />

0.3.0 #

  • Update Android & iOS Lottie Library

example/lib/main.dart

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_lottie_plus/flutter_lottie_plus.dart';
import 'page_dragger.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  LottieController controller;
  LottieController controller2;
  StreamController<double> newProgressStream;

  _MyAppState() {
    newProgressStream = new StreamController<double>();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PageDragger(
        stream: this.newProgressStream,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Lottie'),
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                SizedBox(
                  width: 150,
                  height: 150,
                  child: LottieView.fromURL(
                    url: "https://raw.githubusercontent.com/airbnb/lottie-ios/master/Example/Tests/Marker.json",
                    autoPlay: true,
                    loop: true,
                    reverse: true,
                    onViewCreated: onViewCreated,
                  )
                ),
                FlatButton(
                  child: Text("Play"),
                  onPressed: () {
                    controller.play();
                  },
                ),
                FlatButton(
                  child: Text("Stop"),
                  onPressed: () {
                    controller.stop();
                  },
                ),
                FlatButton(
                  child: Text("Pause"),
                  onPressed: () {
                    controller.pause();
                  },
                ),
                FlatButton(
                  child: Text("Resume"),
                  onPressed: () {
                    controller.resume();
                  },
                ),
                Text("From File"),
                Container(
                  child: SizedBox(
                    width: 150,
                    height: 150,
                    child: LottieView.fromFile(
                      filePath: "animations/newAnimation.json",
                      autoPlay: true,
                      loop: true,
                      reverse: true,
                      onViewCreated: onViewCreatedFile,
                    ),
                  ),
                ),
                FlatButton(
                  child: Text("Change Color"),
                  onPressed: () {
                    // Set Color of KeyPath
                    this.controller2.setValue(
                      value: LOTColorValue.fromColor(
                        color: Color.fromRGBO(0, 0, 255, 1)
                      ),
                      keyPath: "body Konturen.Gruppe 1.Fläche 1"
                    );
                    // Set Opacity of KeyPath
                    this.controller2.setValue(
                      value: LOTOpacityValue(opacity: 0.1),
                      keyPath: "body Konturen.Gruppe 1.Fläche 1"
                    );
                  },
                ),
                Text("Drag anywhere to change animation progress"),
              ],
            ),
          ),
        ),
      ),
    );
  }

  void onViewCreated(LottieController controller) {
    this.controller = controller;

    // Listen for when the playback completes
    this.controller.onPlayFinished.listen((bool animationFinished) {
      print("Playback complete. Was Animation Finished? " + animationFinished.toString());
    });
  }

  void onViewCreatedFile(LottieController controller) {
    this.controller2 = controller;
    newProgressStream.stream.listen((double progress) {
      this.controller2.setAnimationProgress(progress);
    });
  }

  void dispose() {
    super.dispose();
    newProgressStream.close();
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_lottie_plus: ^0.3.16

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_lottie_plus/flutter_lottie_plus.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
64
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
82
Learn more about scoring.

We analyzed this package on Apr 4, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health issues and suggestions

Document public APIs. (-0.39 points)

47 out of 48 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Fix lib/src/lottie_view.dart. (-0.50 points)

Analysis of lib/src/lottie_view.dart reported 1 hint:

line 9 col 7: This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: LottieView.url, LottieView.filePath

Format lib/src/lottie_controller.dart.

Run flutter format to format lib/src/lottie_controller.dart.

Format lib/src/lotvalues/lot_color_value.dart.

Run flutter format to format lib/src/lotvalues/lot_color_value.dart.

Format lib/src/lotvalues/lot_opacity_value.dart.

Run flutter format to format lib/src/lotvalues/lot_opacity_value.dart.

Format lib/src/lotvalues/lot_value.dart.

Run flutter format to format lib/src/lotvalues/lot_value.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test