Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article describes how to use FlutterSpinKit to easily customize load metrics in Flutter

In most of my tutorials, I use a loop progress indicator when I want to show any type of busy state. Not bad at all, but you might want something more appealing or to match your design. Something like this.

Well, you’re in luck. That’s what Flutter SpinKit does.

The installation

Start adding packages to your PubSpec

Flutter_spinkit: ^ 3.1.0Copy the code

usage

There are many metrics to use, so I won’t go through them all. This article should serve as a cheat sheet for all the widgets you can use. Set up your UI and test it as follows.

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( backgroundColor: Colors.grey[800], body: Center( child: SpinKitWave(color: Colors.white, type: SpinKitWaveType.start), )), ); }}Copy the code

This is a list of all the widgets you can use. To experiment, you can replace the subitems of Center with any of the following and refresh your UI to see if it works properly.

SpinKitRotatingCircle(color: Colors.white) SpinKitRotatingPlain(color: Colors.white) SpinKitChasingDots(color: Colors.white) SpinKitPumpingHeart(color: Colors.white) SpinKitPulse(color: Colors.white) SpinKitDoubleBounce(color: Colors.white) SpinKitWave(color: Colors.white, type: SpinKitWaveType.start) SpinKitWave(color: Colors.white, type: SpinKitWaveType.center) SpinKitWave(color: Colors.white, type: SpinKitWaveType.end) SpinKitThreeBounce(color: Colors.white) SpinKitWanderingCubes(color: Colors.white) SpinKitWanderingCubes(color: Colors.white, shape: BoxShape.circle) SpinKitCircle(color: Colors.white) SpinKitFadingFour(color: Colors.white) SpinKitFadingFour(color: Color. White, Rectangle: BoxShape. Rectangle) Rectangle (color: color.white) Rectangle (size: 50, color: rectangle) Colors.white) SpinKitFoldingCube(color: Colors.white) SpinKitRing(color: Colors.white) SpinKitDualRing(color: Colors.white) SpinKitRipple(color: Colors.white) SpinKitFadingGrid(color: Colors.white) SpinKitFadingGrid(color: Colors.white, shape: BoxShape.rectangle) SpinKitHourGlass(color: Colors.white) SpinKitSpinningCircle(color: Colors.white) SpinKitSpinningCircle(color: Colors.white, shape: BoxShape.rectangle) SpinKitFadingCircle(color: Colors.white) SpinKitPouringHourglass(color: Colors.white)Copy the code

\