Spinkit In Flutter

Are you bored with your regular CircularProgressIndicator using as a Loader? But you are too lazy to customize your own loader. Check out Spinkit in flutter which gives you various different 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 basically 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 requirement & need. Let’s check how can we implement spinkit in flutter.

Create a new flutter project & add this dependency in your pubspec file.

  flutter_spinkit: ^5.1.0

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.

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,)
        ],
      ),

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:

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,)
        ],
      ),

    );
  }
}

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

nausheen Siddiqui 27 April 2023

. . .

Spinkit In Flutter

Complete code example:

Output:

Conclusion:

Leave a Comment Cancel Reply

Message Sent!