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: https://pub.dev/packages/flutter_spinkit

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.

Link: https://github.com/vishnuvichu14/flutter_loadingIndicators

The end.