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.