flotter_view 0.0.1

Flutter Android iOS

FlotterView is a plugin allowing you to use Lottie AnimationViews inside of Flutter, natively, using PlatformViews. Support IOS and Andoind

flotter #

Use Lottie animations on iOS and Android.

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

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(
    loopMode, // FlotterLoopMode.playOnce by default

Then, you simply add the controller to an animation view like this:

var animation = FlotterAnimation(controller);

##Loop modes

The loop mode class is FlotterLoopMode, and is written like so:

class FlotterLoopMode {
  static const playOnce = 0;
  static const loop = 1;
  static const autoReverse = 2;
  static const autoReverseLoop = 3;

To indicate a loop mode, use either an integer (0 - 3), or FlotterLoopMode.[loopMode].

Methods #

Now, you can control your animation using:

play() #

Play the animation entirely.


playFrom(fromProgress, toProgress, loopMode) #

Play from a percentage (0.0 - 1.0) to another with a loop mode specified.

  fromProgress, // double
  toProgress, // double
  loopMode // FlotterLoopMode (int)

pause() #

Pause the animation.


reverse() #

Play the animation in reverse, from progress time 1.0 to 0.0.


stop() #

Reset the animation to progress time 0.0.


About #

IOS Fork aroblast , Thanks.

This project is a starting point for 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.

pub points

FlotterView is a plugin allowing you to use Lottie AnimationViews inside of Flutter, natively, using PlatformViews. Support IOS and Andoind

Repository (GitHub)
View/report issues


API reference








Packages that depend on flotter_view