fluttie 0.3.0

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

fluttie: Lottie for flutter

Fluttie (github, pub) is a flutter plugin for displaying animations created in Lottie. Even complex animations can be displayed without having to write long custom rendering code. The library can render the animations by piping the output from the Lottie Android library into a Flutter texture.

You can download a small Flutter app for Android showing what Fluttie looks like in action. This app can also be used to easily preview animations from lottiefiles.com, which might be handy when deciding what animations to use.

Please note: At the moment, this plugin does not support iOS devices.

Things to keep in mind when using this:

  • No iOS support yet
  • Due to a delay between the dart code and the native backend, controlling multiple animations can be a bit laggy. Rendering multiple animations will reduce your app's framerate.
  • Animation widgets need a fixed size for now
  • Do not re-use animations, as this can crash your app. Instead, save the output of loadAnimationFromAsset() and construct a new animation whenever you need to.

Getting Started

The example included contains a basic, but throughoutly commented, app illustrating how to include, load and show animations in Fluttie.

In order to use animations with fluttie, you will need a json file containing the composition for your animation. You can either export it using an AfterEffects plugin (see instructions) or grab some at lottiefiles.com. A composition is a JSON file that describes everything in your animation, like the different shapes, colors and movements. Place the file in an folder inside your project and add it in the assets part of your pubspec.yaml, like its done here. If you haven't already done so, also add Fluttie to your projects' dependencies:

dependencies:
  fluttie: ^0.3.0

In order to display animations in Flutter, you will have the plugin load a composition first. The plugin will parse the composition file so that it can quickly display the animation later on.

var instance = new Fluttie();
var emojiComposition = await instance.loadAnimationFromAsset(
    "assets/animations/emoji.json", //Replace this string with your actual file
);

In order to actually show the animation on screen, two parts are neccessary: An AnimationController, which controls the instance of the animation and contains methods to pause and resume it, and finally a widget displaying the animation contained by the controller.

// This creates the controller
var emojiAnimation = await instance.prepareAnimation(emojiComposition)

You can also set the duration of your animation and configure looping while preparing the animation by using the optional parameters of prepareAnimation, see the docs fore more details. After having your animation controller ready, you can include it as a widget:

Widget build(BuildContext context) =>
    new FluttieAnimation(emojiAnimation)

Don't forget to start your animation by calling emojiAnimation.start() on your controller!

Questions and bugs

As the library is in an early version, there will be things not working like they should. If you encounter a bug, have a question or want some features implemented, please don't hesitate to create an issue. Of course, I would absolutely appreciate any contributions as pull requests.

0.3

  • Updated the Lottie libray used, thus giving you access to the latest features including image support in animations. Thank you, @kristoffer-zliide, for implementing this!

0.2

  • Make plugin ready for dart 2.

0.1.2

  • Make the plugin only react to activity lifecircle changes that involve the main flutter activity.

0.1.1

  • Fix crashes occuring when disposing animations
  • Ability to unpause animations without having to restart them

0.1.0

  • Render small animations in high quality by using the preferredSize parameter of Fluttie.prepareAnimation.
  • Reduce resource usage by pausing aimations while the app is in background
  • Implement multithreaded rendering, not yet enabled because of an issue in the Flutter framework.

0.0.1

  • First release with basic functionality

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:fluttie/fluttie.dart';

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

/// An example app showcasing the features of fluttie animations. It should
/// show a emoji animation at the top and a bar of stars below it. When tapping
/// on a star, all the stars to the left should be filled in a beautiful animation.
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  /// Animation to display a shocked emoji taken from lottiefiles.com
  FluttieAnimationController shockedEmoji;

  /// A list of animations representing the stars shown in a horizontal line.
  /// They will be started when the user tabs on one of them.
  List<FluttieAnimationController> starAnimations = [];
  /// The amount of stars currently selected in the line. Used to compute the
  /// difference on a tap.
  int currentlySelectedStars = 0;

  /// If we're ready to show the animations. Set to true after they have been
  /// loaded by the plugin.
  bool ready = false;

  /// The performance overlay can be triggered by tapping on the icon on the
  /// right-hand side of the toolbar. It can be used to invastigate the
  /// performance impact of running different animations.
  bool showPerformanceOverlay = false;

  @override
  initState() {
    super.initState();
    /// Load and prepare our animations after this widget has been added
    prepareAnimation();
  }

  @override
  dispose() {
    super.dispose();
    /// When this widget gets removed (in this app, that won't happen, but it
    /// can happen for widgets using animations in other situations), we should
    /// free the resources used by our animations.
    shockedEmoji?.dispose();
    starAnimations.forEach((anim) => anim.dispose());
  }

  // async because the plugin will have to do some background-work
  prepareAnimation() async {
    // Checks if the platform we're running on is supported by the animation plugin
    bool canBeUsed = await Fluttie.isAvailable();
    if (!canBeUsed) {
      print("Animations are not supported on this platform");
      return;
    }

    var instance = new Fluttie();
    
    // Load our first composition for the emoji animation
    var emojiComposition = await instance.loadAnimationFromAsset(
      "assets/animations/emoji_shock.json");
    // And prepare its animation, which should loop infinitely and take 2s per
    // iteration. Instead of RepeatMode.START_OVER, we could have choosen 
    // REVERSE, which would play the animation in reverse on every second iteration.
    shockedEmoji = await instance.prepareAnimation(emojiComposition,
       duration: const Duration(seconds: 2),
       repeatCount: const RepeatCount.infinite(), repeatMode: RepeatMode.START_OVER);

    // Load the composition for our star animation. Notice how we only have to
    // load the composition once, even though we're using it for 5 animations!
    var composition = await instance.loadAnimationFromAsset(
      "assets/animations/star.json");

    // Create the star animation with the default setting. 5 times. The
    // preferredSize needs to be set because the original star animation is quite
    // small. See the documentation for the method prepareAnimation for details.
    for (int i = 0; i < 5; i++) {
      starAnimations.add(
        await instance.prepareAnimation(
          composition, preferredSize: Fluttie.kDefaultSize
        )
      );
    }

    // Loading animations may take quite some time. We should check that the
    // widget is still used before updating it, it might have been removed while
    // we were loading our animations!
    if (mounted) {
      setState(() {
        ready = true; // The animations have been loaded, we're ready
        shockedEmoji.start(); //start our looped emoji animation
      });
    }
  }

  void animateStarChange(int updated) {
    /* When the amount of stars that are selected changes, we will have to
       play or stop animations in order to reflect that in the UI. For that, we
       start the animation for each star that was not previously selected but
       should be selected now (i >= old) and (i < currentlySelectedStars).
       If the amount to show has been reduced, we can simply rewind the animation
       to the beginning, as that will show a hollow star not selected.

       Notice how i refers to the index starting at 0, while the amount should
       start at 1.
    */

    setState(() {
      int old = this.currentlySelectedStars;
      currentlySelectedStars = updated;
      
      for (int i = 0; i < 5; i++) {
        if (i < currentlySelectedStars) { //Star needs to be shown
          if (i >= old) //Star would otherwise already be shown
            starAnimations[i].start();
        } else { //Remove star, reset to beginning
          starAnimations[i].stopAndReset(rewind: true);
        }
      }
    });
  }

  /// Builds a widget animating the star at the specified index.
  Widget buildStar(int i) {
    return new Flexible(
      child: new GestureDetector(
        onTap: () {
          // Update the amount of stars that have been selected when this star
          // is tapped.
          int amountOfStars = i + 1;
          animateStarChange(amountOfStars);
        },
        child: new FluttieAnimation(starAnimations[i])
      )
    );
  }

  /// When we're ready to show the animations, this method will create the main
  /// content showcasing them.
  Widget buildStarContent(BuildContext context) {
    return new Column(
      children: [
        //Display the emoji animations at the top
        new FluttieAnimation(shockedEmoji),
        //followed by a row of 5 stars that can be tapped
        new Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            buildStar(0), buildStar(1), buildStar(2), buildStar(3), buildStar(4)
          ],
        ),
        // Use a Flexible widget so that the rest will be on the bottom
        new Flexible(child: new Container()),
        // And display some credits showing where the animations are taken from
        new RichText(
          text: new TextSpan(
            children: [
              new TextSpan(
                text: "Animations taken from ", 
                style: Theme.of(context).textTheme.body1.copyWith(color: Colors.grey)
              ),
              new TextSpan(
                text: "lottiefiles.com",
                style: Theme.of(context).textTheme.body2
              )
            ]
          ),
        ),
        new Padding(padding: const EdgeInsets.only(bottom: 10.0)),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    // Display the main content, or - when we're not ready for that yet - a text
    // informing the user that the animations are being prepared.
    Widget content = ready ? buildStarContent(context) : new Text("Loading animations");

    return new MaterialApp(
      showPerformanceOverlay: this.showPerformanceOverlay,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Fluttie example'),
          actions: [
            // Button to toggle the performance overlay
            new IconButton(
              icon: const Icon(Icons.build),
              onPressed: () {
                setState(() {
                  showPerformanceOverlay = !showPerformanceOverlay;
                });
              },
            )
          ],
        ),
        body: new Center(child: content)
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  fluttie: ^0.3.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:fluttie/fluttie.dart';
  
Version Uploaded Documentation Archive
0.3.0 Oct 11, 2018 Go to the documentation of fluttie 0.3.0 Download fluttie 0.3.0 archive
0.2.4 Aug 22, 2018 Go to the documentation of fluttie 0.2.4 Download fluttie 0.2.4 archive
0.2.3 Jun 22, 2018 Go to the documentation of fluttie 0.2.3 Download fluttie 0.2.3 archive
0.2.2 May 24, 2018 Go to the documentation of fluttie 0.2.2 Download fluttie 0.2.2 archive
0.2.1 Apr 4, 2018 Go to the documentation of fluttie 0.2.1 Download fluttie 0.2.1 archive
0.2.0 Mar 19, 2018 Go to the documentation of fluttie 0.2.0 Download fluttie 0.2.0 archive
0.1.2 Feb 5, 2018 Go to the documentation of fluttie 0.1.2 Download fluttie 0.1.2 archive
0.1.1 Feb 4, 2018 Go to the documentation of fluttie 0.1.1 Download fluttie 0.1.1 archive
0.1.0 Feb 3, 2018 Go to the documentation of fluttie 0.1.0 Download fluttie 0.1.0 archive
0.0.3 Feb 2, 2018 Go to the documentation of fluttie 0.0.3 Download fluttie 0.0.3 archive

All 11 versions...

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

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

  • Dart: 2.0.0
  • pana: 0.12.4
  • Flutter: 0.9.5

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/fluttie.dart.

Run flutter format to format lib/fluttie.dart.

Dependencies

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