lottie_flutter 0.2.0

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 81

LottieFlutter

Build Status Coverage Status

Lottie-Flutter is based on Lottie-Android.

Original effort by Fabiomsr.

Lottie is a mobile library that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile!

Current status

Achived rednering parity with lottie-android except for dash paths.

All samples included render. Motorcycle has some issues still, but also has issues on lottie-android (due to using effects that aren't supported).

TODO

  • [x] DashPathEffect ★ #9641
  • [ ] Add support for effects
  • [ ] Improve support for path operation/combinations
  • [ ] Support changing colors/timings the way lottie-android does
  • [ ] Support scaling larger or smaller than the containing widget?
  • [ ] Make more Dart/Flutter like. In particular, I'd like to split parsing up.

Lottie Files attribution

The files in this project are from LottieFiles.com

CHANGELOG

0.2.0

  • Fix handling/drawing of RRect
  • Update dependencies

0.1.1

  • Fix homepage link for pub

0.1.0

  • Initial release

example/main.dart

import 'dart:async';
import 'dart:convert';
import 'dart:ui';
import 'package:lottie_flutter/lottie_flutter.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;

const List<String> assetNames = const <String>[
  'assets/Indicators2.json',
  'assets/happy_gift.json',
  'assets/empty_box.json',
  'assets/muzli.json',
  'assets/hamburger_arrow.json',
  'assets/motorcycle.json',
  'assets/emoji_shock.json',
  'assets/checked_done_.json',
  'assets/favourite_app_icon.json',
  'assets/preloader.json',
  'assets/walkthrough.json',
  'assets/rrect.json',
];

void main() {
  runApp(new DemoApp());
}

class DemoApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Lottie Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const LottieDemo(),
    );
  }
}

class LottieDemo extends StatefulWidget {
  const LottieDemo({Key key}) : super(key: key);

  @override
  _LottieDemoState createState() => new _LottieDemoState();
}

class _LottieDemoState extends State<LottieDemo>
    with SingleTickerProviderStateMixin {
  LottieComposition _composition;
  String _assetName;
  AnimationController _controller;
  bool _repeat;

  @override
  void initState() {
    super.initState();

    _repeat = false;
    _loadButtonPressed(assetNames.last);
    _controller = new AnimationController(
      duration: const Duration(milliseconds: 1),
      vsync: this,
    );
    _controller.addListener(() => setState(() {}));
  }

  void _loadButtonPressed(String assetName) {
    loadAsset(assetName).then((LottieComposition composition) {
      setState(() {
        _assetName = assetName;
        _composition = composition;
        _controller.reset();
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: const Text('Lottie Demo'),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            new DropdownButton<String>(
              items: assetNames
                  .map((String assetName) => new DropdownMenuItem<String>(
                        child: new Text(assetName),
                        value: assetName,
                      ))
                  .toList(),
              hint: const Text('Choose an asset'),
              value: _assetName,
              onChanged: (String val) => _loadButtonPressed(val),
            ),
            new Text(_composition?.bounds?.size?.toString() ?? ''),
            new Lottie(
              composition: _composition,
              size: const Size(300.0, 300.0),
              controller: _controller,
            ),
            new Slider(
              value: _controller.value,
              onChanged: _composition != null
                  ? (double val) => setState(() => _controller.value = val)
                  : null,
            ),
            new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new IconButton(
                    icon: const Icon(Icons.repeat),
                    color: _repeat ? Colors.black : Colors.black45,
                    onPressed: () => setState(() {
                          _repeat = !_repeat;
                          if (_controller.isAnimating) {
                            if (_repeat) {
                              _controller.forward().then<Null>(
                                  (Null nul) => _controller.repeat());
                            } else {
                              _controller.forward();
                            }
                          }
                        }),
                  ),
                  new IconButton(
                    icon: const Icon(Icons.fast_rewind),
                    onPressed: _controller.value > 0 && _composition != null
                        ? () => setState(() => _controller.reset())
                        : null,
                  ),
                  new IconButton(
                    icon: _controller.isAnimating
                        ? const Icon(Icons.pause)
                        : const Icon(Icons.play_arrow),
                    onPressed: _controller.isCompleted || _composition == null
                        ? null
                        : () {
                            setState(() {
                              if (_controller.isAnimating) {
                                _controller.stop();
                              } else {
                                if (_repeat) {
                                  _controller.repeat();
                                } else {
                                  _controller.forward();
                                }
                              }
                            });
                          },
                  ),
                  new IconButton(
                    icon: const Icon(Icons.stop),
                    onPressed: _controller.isAnimating && _composition != null
                        ? () {
                            _controller.reset();
                          }
                        : null,
                  ),
                ]),
          ],
        ),
      ),
    );
  }
}

Future<LottieComposition> loadAsset(String assetName) async {
  return await rootBundle
      .loadString(assetName)
      .then<Map<String, dynamic>>((String data) => json.decode(data))
      .then((Map<String, dynamic> map) => new LottieComposition.fromMap(map));
}

Use this package as a library

1. Depend on it

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


dependencies:
  lottie_flutter: ^0.2.0

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

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

3. Import it

Now in your Dart code, you can use:


import 'package:lottie_flutter/lottie_flutter.dart';
  
Version Uploaded Documentation Archive
0.2.0 Sep 15, 2018 Go to the documentation of lottie_flutter 0.2.0 Download lottie_flutter 0.2.0 archive
0.1.1 May 9, 2018 Go to the documentation of lottie_flutter 0.1.1 Download lottie_flutter 0.1.1 archive
0.1.0 May 9, 2018 Go to the documentation of lottie_flutter 0.1.0 Download lottie_flutter 0.1.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
69
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
80
Overall:
Weighted score of the above. [more]
81
Learn more about scoring.

We analyzed this package on Sep 18, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0
  • pana: 0.12.3
  • Flutter: 0.8.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Suggestions

The description is too short.

Add more detail about the package, what it does and what is its target use case. Try to write at least 60 characters.

Fix lib/src/drawing/elements/shapes.dart.

Analysis of lib/src/drawing/elements/shapes.dart reported 1 hint:

line 11 col 8: Unused import: 'package:vector_math/vector_math_64.dart'.

Format lib/src/elements/groups.dart.

Run flutter format to format lib/src/elements/groups.dart.

Format lib/src/values.dart.

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

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
collection >=1.14.6 <2.0.0 1.14.11
flutter 0.0.0
meta >=1.1.2 <2.0.0 1.1.6
path_drawing ^0.2.1 0.2.4 0.3.0
vector_math >=2.0.6 <3.0.0 2.0.8
Transitive dependencies
sky_engine 0.0.99
typed_data 1.1.6
Dev dependencies
flutter_test
test ^1.3.0