flotter 0.3.0 flotter: ^0.3.0 copied to clipboard
Flotter is a plugin allowing you to use Lottie AnimationViews inside of Flutter, natively, using PlatformViews.
flotter #
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:
<key>io.flutter.embedded_views_preview</key>
<true/>
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 Runner
project.
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 FlotterAnimation
class.
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 width
and 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 FlotterLoopMode.[loopMode]
.
Methods #
Now, you can control your animation using:
play() #
Play the animation entirely.
controller.play()
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() #
Pause the animation.
controller.pause()
reverse() #
Play the animation in reverse, from progress time 1.0 to 0.0.
controller.reverse()
stop() #
Reset the animation to progress time 0.0.
controller.stop()
About #
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.