lottie_flutter 0.1.1

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

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.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 assetNames = const [
  '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',
];

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: new LottieDemo(),
    );
  }
}

class LottieDemo extends StatefulWidget {
  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[6]);
    _controller = new AnimationController(
      duration: new Duration(milliseconds: 1),
      vsync: this,
    );
    _controller.addListener(() => setState(() {}));
  }

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

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Lottie Demo'),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            new DropdownButton(
              items: assetNames
                  .map((assetName) => new DropdownMenuItem(
                        child: new Text(assetName),
                        value: assetName,
                      ))
                  .toList(),
              hint: new Text('Choose an asset'),
              value: _assetName,
              onChanged: (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
                  ? (val) => setState(() => _controller.value = val)
                  : null,
            ),
            new Row(mainAxisAlignment: MainAxisAlignment.center, children: [
              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((f) => _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((data) => json.decode(data))
      .then((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.1.1"

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.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

Analysis

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

  • Dart: 2.0.0-dev.54.0
  • pana: 0.11.1
  • Flutter: 0.4.4

Scores

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

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 analysis and formatting issues.

    Analysis or formatting checks reported 12 hints.

    Strong-mode analysis of lib/src/drawing/drawing_layers.dart gave the following hint:

    line: 12 col: 8
    Unused import: 'package:lottie_flutter/src/values.dart'.

    Strong-mode analysis of lib/src/elements/fills.dart gave the following hint:

    line: 21 col: 14
    The value of the field '_fillEnabled' isn't used.

    Similar analysis of the following files failed:

    • lib/src/elements/paths.dart (hint)
    • lib/src/elements/shapes.dart (hint)
    • lib/src/parsers/parsers.dart (hint)
    • lib/src/utils.dart (hint)
  • Package is pre-v1 release.

    While there is nothing inherently wrong with versions of 0.*.*, it usually means that the author is still experimenting with the general direction API.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.19.0 <3.0.0
collection >=1.14.6 <2.0.0 1.14.6 1.14.9
flutter 0.0.0
meta >=1.1.2 <2.0.0 1.1.5
path_drawing ^0.2.1 0.2.3
vector_math >=2.0.6 <3.0.0 2.0.6 2.0.7
Transitive dependencies
sky_engine 0.0.99
typed_data 1.1.5
Dev dependencies
flutter_test
inflection any
test >=0.12.34 <1.0.0