Use Lottie animations on iOS.
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.
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.
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.