Custom Loading Indicators in Flutter using SpinKit

By default, people use Circular Progress Indicator in their flutter applications which is inside the material package. But we can use custom animated loading indicators in flutter using a plugin Flutter Spinkit.

We will see all the available loading animated indicators in this article. First, we need to add the plugin in the pubspec.yaml file under dependencies.

Flutter Spinkit Plugin:

Flutter SpinKit Dependency

Then, we have to import that package into our program file for using it in our code.

importing spinkit package

For this example, we will just create an appbar with the title “Spinkit” and the list of animated loading indicators.

Simple code for demonstrating spinkit

In the above example, we have just set the background color as blue and created an appBar and then placed the loading indicator in the center.

There are lot more loading indicators in this package. All of those are listed below for easy access.

  1. SpinKitRotatingCircle(color: Colors.white)

2. SpinKitRotatingPlain(color: Colors.white)

3. SpinKitChasingDots(color: Colors.white)

4. SpinKitPumpingHeart(color: Colors.white)

5. SpinKitPulse(color: Colors.white)

6. SpinKitDoubleBounce(color: Colors.white)

7. SpinKitWave(color: Colors.white, type: SpinKitWaveType.start)

8. SpinKitWanderingCubes(color: Colors.white)

9. SpinKitThreeBounce(color: Colors.white)

10. SpinKitFadingFour(color: Colors.white)

11. SpinKitCircle(color: Colors.white)

12. SpinKitFadingCube(color: Colors.white)

13. SpinKitCubeGrid(color: Colors.white)

14. SpinKitFoldingCube(color: Colors.white)

15. SpinKitRing(color: Colors.white)

16. SpinKitDualRing(color: Colors.white)

17. SpinKitRipple(color: Colors.white)

18. SpinKitFadingGrid(color: Colors.white)

19. SpinKitHourGlass(color: Colors.white)

20. SpinKitSpinningCircle(color: Colors.white),

21. SpinKitFadingCircle(color: Colors.white)

22. SpinKitPouringHourglass(color: Colors.white)

The entire SpinKit loading indicators Code has been written in here.


The end.




Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Kubernetes Storage By Example: Part 1


SCD’s(I & II) Implementation.

Are stereotypes about developers really true???

How to use “cd?

Uma citação, para começar

Qt Slot With Arguments

Qt Slot With Arguments

It’s time for 2.0 — CiteDrive 2.0 (Beta)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Vishnuvarshan P

Vishnuvarshan P

More from Medium

Flutter Textfield Maxlength Detailed Explanation With Example-Best Flutter Guide

Finding SHA1 and SHA-256 key for Flutter app in Android Studio on Windows

Introduction to Flutter

Flutter Navigation using GetX