โœจ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

Overview

โœจ Flutter Spinkit

Build Status - Travis codecov pub package

A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit.

๐ŸŽ– Installing

dependencies:
  flutter_spinkit: "^4.1.2"

โšก๏ธ Import

import 'package:flutter_spinkit/flutter_spinkit.dart';

๐ŸŽฎ How To Use

const spinkit = SpinKitRotatingCircle(
  color: Colors.white,
  size: 50.0,
);
final spinkit = SpinKitFadingCircle(
  itemBuilder: (BuildContext context, int index) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: index.isEven ? Colors.red : Colors.green,
      ),
    );
  },
);
final spinkit = SpinKitSquareCircle(
  color: Colors.white,
  size: 50.0,
  controller: AnimationController(vsync: this, duration: const Duration(milliseconds: 1200)),
);

For more info, please, refer to the showcase.dart in the example.

๐Ÿš€ Showcase


RotatingPlain

DoubleBounce

Wave

WanderingCubes

FadingFour

FadingCube

Pulse

ChasingDots

ThreeBounce

Circle

CubeGrid

FadingCircle

RotatingCircle

FoldingCube

PumpingHeart

DualRing

HourGlass

PouringHourGlass

FadingGrid

Ring

Ripple

SpinningCircle

SquareCircle

Some GIF images gotten from Android Spinkit.

๐Ÿ› Bugs/Requests

If you encounter any problems feel free to open an issue. If you feel the library is missing a feature, please raise a ticket on Github and I'll look into it. Pull request are also welcome.

โ—๏ธ Note

For help getting started with Flutter, view our online documentation.

For help on editing plugin code, view the documentation.

โ˜€๏ธ Authors

Jeremiah Ogbomo

Ayush Agarwal

โญ๏ธ License

MIT License

Issues
  • Symbol Off Center

    Symbol Off Center

    Hi, it appears that the loading animation is off-center, making it difficult to align it properly. imageoffcenter

    enhancement quickfix 
    opened by ThinkDigitalSoftware 16
  • updated roadmap

    updated roadmap

    opened by aagarwal1012 9
  • New Animations not actually added?

    New Animations not actually added?

    Hi, good to see more animations added! In checking with the 1.0 update and looking at the exports and the file, it doesn't look like the new animations made it to the file? I'm not able to find the new ones.

    library flutter_spinkit;
    
    export 'src/chasing_dots.dart';
    export 'src/double_bounce.dart';
    export 'src/fading_cube.dart';
    export 'src/folding_cube.dart';
    export 'src/pulse.dart';
    export 'src/rotating_circle.dart';
    export 'src/rotating_plain.dart';
    export 'src/fading_four.dart';
    export 'src/three_bounce.dart';
    export 'src/wave.dart';
    export 'src/circle.dart';
    export 'src/fading_circle.dart';
    export 'src/wandering_cubes.dart';
    export 'src/cube_grid.dart';
    export 'src/pumping_heart.dart';
    
    

    I was looking for the DualRing

    opened by ThinkDigitalSoftware 8
  • Cannot customize the alignment, always in center screen

    Cannot customize the alignment, always in center screen

    SpinKitFadingCircle etc will only be shown in the middle of the screen.

    As following code says that there is no alignment setting for the widget, and I check the source code that the alignment is default to center. And if I constraint the widget inside a container at the bottom of the screen, the widget will not be shown.

    SpinKitFadingCircle(
      color: Colors.white,
      width: 50.0,
      height: 50.0,
    );
    

    Here is my code, which CircularProgressIndicator be replaced by SpinKitFadingCircle if I want to place it at the bottom.

      Widget _buildProgressIndicator() {
        return Container(
          alignment: Alignment.bottomCenter,
          padding: const EdgeInsets.all(16.0),
          child: Opacity(
            opacity: widget.isLoading ? 1.0 : 0.0,
            child: Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white,
              ),
              child: SizedBox(
                width: 40.0,
                height: 40.0,
                child: Container(
                  padding: EdgeInsets.all(8.0),
                  child: CircularProgressIndicator(
                    valueColor: AlwaysStoppedAnimation(kShrinePink300),
                    strokeWidth: 3.0,
                  ),
                ),
              ),
            ),
          ),
        );
      }
    

    Hope it makes more clear. Sorry for the detail missing. I thought it was quite a obvious problem.

    question 
    opened by baoxiehao 6
  • Feat : CubeGrid

    Feat : CubeGrid

    Some of you example files in android folder are not building my project, so modified example so that it could run in android studio. Refer showcase for the preview of Cube Grid, Thanks.

    opened by aagarwal1012 6
  • Null safety

    Null safety

    Hi! thanks for package. Can you publish null-safety to prerelease in pub.dev like other packages? Thanks )

    opened by Overman775 6
  • Three in out

    Three in out

    This PR adds a new type of spinner that shows a dot leaving & entering at the same time.

    There may be a better or more efficient way to implement it, as this is essentially using a layout transition.

    A major issue with this implementation is that it's not straightforward to add a gap between the dots. This may be solved by further wrapping the items in a AnimatedContainer and reset the alignment of each.

    The PR is based on #74, and also simplifies the showcase page a little bit.

    ThreeInOut

    opened by ened 4
  • Improve code quality

    Improve code quality

    Fixes #60 Fixes #57

    opened by jogboms 4
  • The method 'reverse' was called on null

    The method 'reverse' was called on null

    Describe the bug I'm getting the following exception

    The method 'reverse' was called on null
    

    after the animation stops showing.

    The stacktrace looks like this (and goes on and on like this for 500 lines):

    I/flutter (11044): โ•โ•โ•ก EXCEPTION CAUGHT BY ANIMATION LIBRARY โ•žโ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•โ•
    I/flutter (11044): The following NoSuchMethodError was thrown while notifying status listeners for AnimationController:
    I/flutter (11044): The method 'reverse' was called on null.
    I/flutter (11044): Receiver: null
    I/flutter (11044): Tried calling: reverse()
    I/flutter (11044): 
    I/flutter (11044): When the exception was thrown, this was the stack:
    I/flutter (11044): #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:51:5)
    I/flutter (11044): #1      autoReverseFn.<anonymous closure> (package:flutter_spinkit/src/utils.dart:8:27)
    I/flutter (11044): #2      AnimationLocalStatusListenersMixin.notifyStatusListeners (package:flutter/src/animation/listener_helpers.dart:193:19)
    I/flutter (11044): #3      AnimationController._checkStatusChanged (package:flutter/src/animation/animation_controller.dart:753:7)
    I/flutter (11044): #4      AnimationController._animateToInternal (package:flutter/src/animation/animation_controller.dart:585:7)
    I/flutter (11044): #5      AnimationController.forward (package:flutter/src/animation/animation_controller.dart:458:12)
    I/flutter (11044): #6      _SpinKitCubeGridState.initState (package:flutter_spinkit/src/cube_grid.dart:37:9)
    I/flutter (11044): #7      StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4068:58)
    I/flutter (11044): #8      ComponentElement.mount (package:flutter/src/widgets/framework.dart:3919:5)
    I/flutter (11044): #9      Element.inflateWidget (package:flutter/src/widgets/framework.dart:3101:14)
    I/flutter (11044): #10     Element.updateChild (package:flutter/src/widgets/framework.dart:2904:12)
    I/flutter (11044): #11     SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5127:14)
    I/flutter (11044): #12     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3101:14)
    I/flutter (11044): #13     MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:5233:32)
    I/flutter (11044): #14     Element.inflateWidget (package:flutter/src/widgets/framework.dart:3101:14)
    I/flutter (11044): #15     Element.updateChild (package:flutter/src/widgets/framework.dart:2904:12)
    

    SpinKit name

    SpinKitCubeGrid

    Screenshots

    opened by magnuswikhog 4
  • The DualRing and HourGlass do not require asset files.

    The DualRing and HourGlass do not require asset files.

    Replace the image file with CustomPainter. Then The DualRing and HourGlass do not require asset files.

    enhancement 
    opened by CaiJingLong 4
  • Spinner spins forever after leaving the phone idle for 24 hours.

    Spinner spins forever after leaving the phone idle for 24 hours.

    When I implement this spinner, I notice the loading spinner spins forever if you left the device idle for 24+ hours. This happens consistently.

    opened by timtasay 0
  • PuringHourglass widget does not animate on web mobile browsers

    PuringHourglass widget does not animate on web mobile browsers

    If an app with the PouringHourglass widget is deployed to the web and opened on a mobile browser such as Safari or Android Chrome, the PouringHourglass widget doesn't show the animation.

    As a workaround, If I request the DesktopVersion of the webApp, then it automates correctly but that's quite inconvenient.

    opened by kociubin 1
  • Stops spinning while analysing data in async job

    Stops spinning while analysing data in async job

    Describe the bug It's works fine, as long as i don't start a async job that not just loads data, but also deals with it. So in my case, i make a request to a server, but then also do some quick analysis of a big string that takes a few seconds. When the analysis starts, it stops spinning. It should not be overloaded.... it's just one other async function that triggers it.

    SpinKit name All.

    Screenshots Nothing to show, it just stops.

    opened by trueToastedCode 1
  • Considering moving to the Flutter community packages.

    Considering moving to the Flutter community packages.

    As the days go by I realise I am having less and less time around open source, I am considering moving this repo under the umbrella of Flutter Community. So it can progress further and maybe under renewed vigour. Its not my single decision to make, so I would like to know if it okay to go ahead with it.

    cc @ened @CaiJingLong @aagarwal1012 @Abhishek0706 @payam-zahedi

    opened by jogboms 1
  • SpinKitCubeGrid not working as showcased

    SpinKitCubeGrid not working as showcased

    SpinKitCubeGrid plays a back-and-forth animation, with the cubes disappearing from bottom left and then reappearing from top right, instead of reappearing from bottom left as the gif in README.md shows.

    opened by williamgaoyuan 3
  • Integrate some widgets with painter

    Integrate some widgets with painter

    Hi I just widgets some files and integrated them with CustomPainter. List of widgets that have been Changed:

    • SpinKitSquareCircle
    • SpinKitPumpingHeart
    • SpinKitPulse
    • SpinKitDoubleBounce

    also, I Removed itemBuilder of these widgets. If any changes needed please let me know. Thank you

    opened by payam-zahedi 6
  • Custom Painters!

    Custom Painters!

    Planning on a complete rewrite from animated Widgets to CustomPaints. I believe this would have some improved performance. Anyone can help out if need be.

    enhancement help wanted breaking-change 
    opened by jogboms 5
Releases(v5.1.0)
Owner
Jeremiah Ogbomo
Think. Code. Love.
Jeremiah Ogbomo
A Flutter library for gradually painting SVG path objects on canvas (drawing line animation).

drawing_animation From static SVG assets See more examples in the showcasing app. Dynamically created from Path objects which are animated over time m

null 382 Nov 29, 2021
Flutter package for creating awesome animations.

?? Simple Animations Simple Animations is a powerful package to create beautiful custom animations in no time. ?? fully tested ?? well documented ?? e

Felix Blaschke 737 Nov 18, 2021
Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

null 356 Nov 29, 2021
A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Potato Open Sauce Project 5 Nov 8, 2021
Flutter UI Challenges

Introduction ?? Zoo is a small, simple and beautiful app that lists 3d model of animals. Before we start, you can take a look at the app: Usage ?? To

Sanjeev Madhav 51 Oct 21, 2021
A Flutter app with flip animation to view profiles of friends. ๐ŸŒŸ

Flip View Made with ?? in India This flutter app is based on the design made Dmytro Prudnikov for Yalantis on Dribble.He describes the design as: Just

Shubham Soni 58 Nov 3, 2021
Simple reactive animations in your Flutter apps.

just.motion Flutter package to create organic motion transitions. Why? The Motion Value stateless hot reload status notifier Ease Motion Spring Motion

Roi Peker 46 Oct 5, 2021
Timer UI animation challenge from 'Flutter Animations Masterclass'

stopwatch_flutter An IOS stopwatch challenge from Flutter Animations Masterclass - Full Course What I learned; Use timer Use ticker Create custom shap

Ali Riza Reisoglu 10 Oct 24, 2021
App HTTP Client is a wrapper around the HTTP library Dio to make network requests and error handling simpler, more predictable, and less verbose.

App HTTP Client App HTTP Client is a wrapper around the HTTP library Dio to make network requests and error handling simpler, more predictable, and le

Joanna May 25 Nov 25, 2021
Animated Selection Slide Sezgin BilgetayAnimated Selection Slide An animated selection widget by swiping by Sezgin Bilgetay.

Animated Selection Slide This flutter project allows you to make your choices with animation in inbox. For UI, it's inspired by the great example on d

null 291 Nov 13, 2021
gen_lang is a dart library for internationalization. Extracts messages to generate dart files required by Intl, inspired by Intl_translation and Flutter i18n

gen_lang gen_lang is a dart library for internationalization. Extracts messages to generate dart files required by Intl. Now, three steps for internat

kw101 88 Oct 27, 2021
๐Ÿ restaurant menu app made with flutter inspired by this design https://goo.gl/jChLBV

Menu Flutter Todo Make background colors that changes with PageView Add custom tab indicators Change food prices Make cart animation Customize card sh

Braulio Cassule 551 Nov 30, 2021
Cyberpunk-inspired puzzle game prototype created with Flutter and Flame #Hack20 #FlutterHackathon

Ghost Rigger Prototype of a cyberpunk-inspired puzzle game set in a dystopian future: In the year 2078, the megacorporation Native Development Initiat

Float like a dash Sting like a dart 157 Nov 17, 2021
A Flutter package for building custom skeleton widgets to mimic the page's layout while loading.

Skeletons A Flutter package for building custom skeleton widgets to mimic the page's layout while loading. Examples Items ListView (Default) ListView

Moh Badjah 18 Dec 1, 2021
Utilities for loading and running WASM modules from Dart code

Provides utilities for loading and running WASM modules Built on top of the Wasmer runtime. Setup Run dart run wasm:setup to build the Wasmer runtime.

Dart 172 Nov 24, 2021
The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that frozened column/row,loading more, high performance and better experience in TabBarView/PageView.

flex_grid Language: English| ไธญๆ–‡็ฎ€ไฝ“ The FlexGrid control provides a powerful and quickly way to display data in a tabular format. It is including that f

FlutterCandies 25 Nov 17, 2021
A collection of Flutter examples and demos.

Flutter samples A collection of open source samples that illustrate best practices for Flutter. Visual samples index The easiest way to browse through

Flutter 10.9k Nov 30, 2021
Flutter app for collection of UI in a UIKit

Flutter UIKit The goal of this project is to provide an ultimate collection of real world app's UIs. While I built Flutter UIKit for my own needs, it

Pawan Kumar 5.7k Nov 21, 2021
Awesome HTTP Inspector Tool | Flutter Library of the Week | EP-01 || EP-01

flutter_best_packages A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Pawan Kumar 23 Nov 8, 2021
Flutter app for collection of UI in a UIKit

Flutter UIKit The goal of this project is to provide an ultimate collection of real world app's UIs. While I built Flutter UIKit for my own needs, it

Pawan Kumar 5.7k Nov 23, 2021
A collection of Animations that aims to improve the user experience for your next flutter project.

Flutter Animations A collection of Animations that aims to improve the user experience for your next flutter project. Built by Ezaldeen SAHB I hope th

Ezaldeen Sahb 115 Nov 22, 2021
Collection of all the widgets with their tutorial

Flutter Widgets A collection of flutter widgets with tutorials. Season 1 Episode 1 - Sized Box Episode 2 - Animated Builder Episode 3 - Draggable and

Pawan Kumar 141 Nov 23, 2021
A simple dart http server in Koa2 style

Dia A simple dart http server like KoaJS. This package allows you to create a http / http server in a couple of lines. Dia creates a context from a bu

Andrey Unger 16 Nov 16, 2021
Liquidart is a Dart HTTP server framework for building REST APIs. Includes PostgreSQL ORM and OAuth2 provider. Revival of the abandoned AQUEDUCT project.

Liquidart is a modern Dart HTTP server framework. The framework is composed of libraries for handling and routing HTTP requests, object-relational map

Aldrin's Art Factory 33 Nov 3, 2021
server side dart micro-framework to handle incoming http requests

Queen Palace ???? Introduction server side dart micro-framework to handle incoming http requests

Ahmed Masoud 29 Oct 21, 2021
Movie Lib is a mobile application where you can find the movies of your interest. This app provides a collection of movies of different languages according to your interest.

Movie Lib Movie Lib is a mobile application where you can find the movies of your interest. This app provides a collection of movies of different lang

Abhijith Kp 6 Sep 28, 2021
A powerful Http client for Dart, which supports Interceptors, FormData, Request Cancellation, File Downloading, Timeout etc.

dio_http A powerful Http client for Dart, which supports Interceptors, Global configuration, FormData, Request Cancellation, File downloading, Timeout

null 48 Nov 24, 2021
A simple animated radial menu widget for Flutter.

flutter_radial_menu A radial menu widget for Flutter. . Installation Install the latest version from pub. Quick Start Import the package, create a Rad

Victor Choueiri 401 Nov 19, 2021
Animated radial and pie charts for Flutter

Flutter Circular Chart A library for creating animated circular chart widgets with Flutter, inspired by Zero to One with Flutter. Overview Create easi

Victor Choueiri 354 Nov 26, 2021