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
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: 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 = 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:
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
the docs fore more details.
After having your animation controller ready, you can include it as a widget:
Widget build(BuildContext context) => FluttieAnimation(emojiAnimation)
Don't forget to start your animation by calling
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.
- Fix build on iOS devices (iOS still isn't supported by this plugin)
- Upgraded to lottie-android 3
- Added support for animations with asset images. Thanks to @DeividAndreola for implementing this!
- Simplified logic to handle composition parsing to fix a race condition
- Temporarily disable this plugin on pre-Lollipop devices. A bug in the Flutter engine could otherwise crash your apps. This will be reverted once a version with a fix lands in flutter beta.
Again, thanks to @kristoffer-zliide for these changes!
- 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!
- Make plugin ready for dart 2.
- Make the plugin only react to activity lifecircle changes that involve the main flutter activity.
- Fix crashes occuring when disposing animations
- Ability to unpause animations without having to restart them
- Render small animations in high quality by using the
- 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.
- First release with basic functionality
Demonstrates how to use the fluttie plugin.
Getting Started #
For help getting started with Flutter, view our online documentation.
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies: fluttie: ^0.5.0
2. Install it
You can install packages from the command line:
$ 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:
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
We analyzed this package on Jan 25, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.7.0
- pana: 0.13.4
- Flutter: 1.12.13+hotfix.5