Flotter is a plugin allowing you to use Lottie AnimationViews inside of Flutter, natively, using PlatformViews.
Use Lottie animations on iOS.
Important note #
First of all, you must add this to your
info.plist file in your iOS project in order to enable the animation views to work correctly:
Then, you need to make sure that your iOS Podfile uses frameworks, to enable Swift compability. In your Podfile, add
use_frameworks! like so:
target 'Runner' do use_frameworks!
Finally, as the iOS plugin is written in Swift, you must also specify the SWIFT_VERSION in your build settings, inside your XCode project. To do so, you must first:
1. Add a new Swift file to your project inside the
Open the project inside of XCode, and go to File / New / File (⌘N). Choose Swift file and add it to the Runner.
2. Create a new Objective C bridging header by choosing
Create bridging header in the popup that opened.
After selecting the Runner in which you have to add the Swift file, a popup will open asking you if you want to create a bridging header. Simply choose Create bridging header.
3. Set the SWIFT_VERSION to Swift 5.
In your Runner settings, go to Build settings, and set the SWIFT_VERSION to your convenience. Flotter is built in Swift 5, but you can try using an older version.
For more informations, please see ko2ic tutorial.
Getting started #
This plugin allows the use of the
LOTAnimationView on iOS using Flutter's
To add an animation to your application,you must first create a
FotterAnimationController. It will hold your animation's informations, such as the path of the json file in your assets containing the animation, the name given to the animation, and a few other parameters:
var controller = FlotterAnimationController( animationFilePath, name, loopMode, // FlotterLoopMode.playOnce by default );
Then, you simply add the controller to an animation view like this:
var animation = FlotterAnimation( controller, width, // double.infinity by default height, // double.infinity by default playAtInit // false by default );
Remember that this view will expand in any direction with no constraints at all. You will have to use it either with
height parameters, or place it inside a constrainted widget.
Loop modes #
The loop mode class is
FlotterLoopMode, and offers the same loop modes as
LottieLoopMode offers. To indicate a loop mode, use
Now, you can control your animation using:
Play the animation entirely.
playFrom(fromProgress, toProgress, loopMode) #
Play from a percentage (0.0 - 1.0) to another with a loop mode specified.
controller.playFrom( fromProgress, // double toProgress, // double loopMode // FlotterLoopMode )
Pause the animation.
Play the animation in reverse, from progress time 1.0 to 0.0.
Reset the animation to progress time 0.0.
This project is a Flutter plug-in package, a specialized package that includes platform-specific implementation code for Android and/or iOS.
For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.