Spinkit in Flutter with Example

Last Updated : 09 Nov, 2022

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. Like loading an Application, video download is in progress to indicate this we're using indicators for that particular action, loading of data from the database, saving data in the database, etc. So, In this article, we will see how to Implement Spinkit. Hope you understand what are we going to do. If not following below shows what we are going to do.

Note: We are not going to show you all. We will learn How to implement Spinkit.

Example Project

Add Dependency:

dependencies:
  flutter_spinkit: ^5.1.0

Note: When you read this, the version of the plugin may change.

Import the package:

import 'package:flutter_spinkit/flutter_spinkit.dart';

How to use:

It is pretty simple to use it.

const spinkit = SpinKitRotatingCircle(
     color: Colors.white,
     size: 50.0,
);

Create a class stateless widget MyApp. Return the MaterialApp, call the SpinHome Class on home property.

Dart

import 'package:flutter/material.dart';
import 'package:spinkit/myHome.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner:  false,
      home:  SpinHome(),
    );
  }
}

Make debugShowCheckedModeBanner to false because I personally don't like it. Now we have to create the SpinHome class or stateless widget.

Dart

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

class SpinHome extends StatelessWidget {
  const SpinHome({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Spinkit flutter")),
      body:
    );
  }
}

Return the scaffold and give the title as you want. In body property, we use the GridView widget. And use the Spinkit Widget.

Dart

GridView.count(
        crossAxisSpacing: 5,
        mainAxisSpacing: 3,
        crossAxisCount: 3,
        children: [
          SpinKitChasingDots(
            color: Colors.indigo,
          ),
          SpinKitCircle(
            color: Colors.amber,
          ),
          SpinKitDancingSquare(
            color: Colors.blueAccent,
          ),
          SpinKitDoubleBounce(
            color: Colors.pink,
          ),
          SpinKitFadingGrid(
            color: Colors.orange,
          ),
          SpinKitWanderingCubes(
            color: Colors.teal,
          ),
          SpinKitHourGlass(color: Colors.lightGreenAccent),
          SpinKitDualRing(
            color: Colors.cyan,
          ),
        ],
      ),

GridView makes all the spinkit in grid view. just like your phone homepage.

Complete Example Code:

Dart

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

class SpinHome extends StatelessWidget {
  const SpinHome({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Spinkit flutter")),
      body: GridView.count(
        crossAxisSpacing: 5,
        mainAxisSpacing: 3,
        crossAxisCount: 3,
        children: [
          const SpinKitChasingDots(
            color: Colors.indigo,
          ),
          const SpinKitCircle(
            color: Colors.amber,
          ),
          const SpinKitDancingSquare(
            color: Colors.blueAccent,
          ),
          SpinKitDoubleBounce(
            color: Colors.pink,
          ),
          SpinKitFaddingGrid(
            color: Colors.orange,
          ),
          SpinKitWanderingCubes(
            color: Colors.teal,
          ),
          SpinKitHourGlass(color: Colors.lightGreenAccent),
          SpinKitDualRing(
            color: Colors.cyan,
          ),
        ],
      ),
    );
  }
}