flotter_view 0.0.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 62

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.

0.2.1 #

Formatting and new function

This release is only for iOS devices.

  • Running flutter format on lib files.
  • Adding playFrom method for Flutter, and loop modes with FlotterLoopMode.

0.2.0 #

Fixing issues with Swift Flutter plugins

This release is only for iOS devices.

  • Fixing the deployment_target to be 12.0.
  • Adding documentation about how to use this plugin, especially with all the issues about Flutter and Swift plugins.

0.1.0 #

Upgrading Lottie to 3.1.1

This release is only for iOS devices.

  • Upgrading lottie-ios to its most recent version (3.1.1).

0.0.1 #

Initial release

This release is only for iOS devices.

  • Initiating the first lot of functions available in the FlotterAnimationController.


import 'package:flotter_view/flotter.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  _MyAppState createState() => _MyAppState();

class _MyAppState extends State<MyApp> {
  FlotterAnimationController controller1 = FlotterAnimationController('assets/done.json', 'done1');
  FlotterAnimationController controller2 = FlotterAnimationController('assets/done.json', 'done2');
  FlotterAnimationController controller3 = FlotterAnimationController('assets/test.json', 'done3', loopMode: FlotterLoopMode.loop);

  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flotter example'),
        body: Center(
          child:  Column(
            children: <Widget>[
                width: 100.0,
                height: 100.0,

                child: FlotterView(controller1),
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                    child: Text('start()'),
                    onPressed: () {
                      controller1.playFrom(0, 1.0, FlotterLoopMode.playOnce);
                    child: Text('pause()'),
                    onPressed: () {
                    child: Text('stop()'),
                    onPressed: () {
                width: 50.0,
                height: 50.0,

                child: FlotterView(controller2),
                child: Text('reverse()'),
                onPressed: () {
                width: 150.0,
                height: 150.0,

                child: FlotterView(controller3),
              Text('LOOP MODE'),
                mainAxisAlignment: MainAxisAlignment.center,

                children: <Widget>[
                    child: Text('start()'),
                    onPressed: () {
                    child: Text('pause()'),
                    onPressed: () {
                    child: Text('stop()'),
                    onPressed: () {

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  flotter_view: ^0.0.1

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:flotter_view/flotter.dart';
import 'package:flotter_view/generated/i18n.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Apr 8, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Format lib/flotter.dart.

Run flutter format to format lib/flotter.dart.

Format lib/generated/i18n.dart.

Run flutter format to format lib/generated/i18n.dart.

Format lib/src/animationController.dart.

Run flutter format to format lib/src/animationController.dart.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies