Are you bored with your regular CircularProgressIndicator using as a Loader? But you are too lazy to customize your loader. Check out Spinkit in Flutter which gives you various types of loading indicators.
While the application is loading data from API or database, we show a loader to indicate that it’s processing data. Spinkit is a collection of loading indicators animated with flutter. It has huge animated loading indicators which are used when we are loading something.
Read more about Flutter app development from Mobikul.
It’s really easy to use Spinkit in Flutter & show loaders according to your requirements & needs. Let’s check how can we implement Spinkit in Flutter.
Create a new Flutter project & add this dependency in your pubspec file.
|
1 |
flutter_spinkit: ^5.1.0 |
Or you can get an updated version from here: flutter_spinkit
Create a class stateless widget and return the scaffold & give the title in AppBar as you like. Now in the body property add GridView.count & use SpinKit.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
body: GridView.count(crossAxisCount: 4, children: const [ SpinKitCubeGrid(color: Colors.red,), SpinKitCircle(color: Colors.lightBlueAccent,), SpinKitDancingSquare(color: Colors.teal,), SpinKitDualRing(color: Colors.pinkAccent), SpinKitDoubleBounce(color: Colors.lightBlueAccent,), SpinKitFadingFour(color: Colors.yellow,), SpinKitFoldingCube(color: Colors.amber,), SpinKitHourGlass(color: Colors.deepOrangeAccent), SpinKitRipple(color: Colors.cyan,), SpinKitPianoWave(color: Colors.black,), SpinKitPouringHourGlass(color: Colors.brown), SpinKitThreeInOut(color: Colors.amber,) ], ), |
This is how we use SpinKIt. You can use its different properties according to your need such as size, duration, stroke width, etc.
There are lots of different types of Spinkit loaders. We have just shown a few of them for implementation.
Complete code example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(), ); } } class MyHomePage extends StatelessWidget { const MyHomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter Demo'), ), body: GridView.count(crossAxisCount: 3, children: const [ SpinKitCubeGrid(color: Colors.red,), SpinKitCircle(color: Colors.lightBlueAccent,), SpinKitDancingSquare(color: Colors.teal,), SpinKitDualRing(color: Colors.pinkAccent), SpinKitDoubleBounce(color: Colors.lightBlueAccent,), SpinKitFadingFour(color: Colors.yellow,), SpinKitFoldingCube(color: Colors.amber,), SpinKitHourGlass(color: Colors.deepOrangeAccent), SpinKitRipple(color: Colors.cyan,), SpinKitPianoWave(color: Colors.black,), SpinKitPouringHourGlass(color: Colors.brown), SpinKitThreeInOut(color: Colors.amber,) ], ), ); } } |
Output:
Conclusion:
In this flutter article, I have explained a Spinkit in Flutter
Thanks for reading this article.
If I got something wrong, let me know in the comments. I would love to improve.
You can also read – https://mobikul.com/get-storage-in-flutter/
Reference link: https://pub.dev/packages/flutter_spinkit