flotter 0.3.0

Flutter Android iOS

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.

0
likes
80
pub points
20%
popularity

Flotter is a plugin allowing you to use Lottie AnimationViews inside of Flutter, natively, using PlatformViews.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

bastien.lecorre@gmail.com

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flotter