In this tutorial, we are going to learn flutter spinkit or custom loading indicators in Flutter. In most of the times, we need to add some indicators to indicate the particular action such as a page is loading, video download is in progress to indicate this we re using indicators for that particular action. In this tutorial, we are going to use custom circular indicators in flutter app.
The list of some indicators is shown below.
Double Bounce Rotating Plane WanderingCubes Wave
FadingCube Pulse ChasingDots ThreeBounce
Follow the below method to implement Flutter Spinkit.
adding the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.
dependencies:
flutter_spinkit: "^3.1.0"
You can install the package from the command line using the below code with Flutter as shown.
$ flutter pub get
After Adding the dependency package to the pubspec.yaml file , you can now import the package into the dart code by using the below code. without adding the dependency packge to the pubspec.yaml file if you import it will show package not found an error.
import 'package:flutter_spinkit/flutter_spinkit.dart';
Use the below example code to use the selected Spinkit you in your application based on your requirement.
SpinKitRotatingCircle(
color: Colors.white,
size: 50.0,
);
SpinKitFadingCircle(
itemBuilder: (_, int index) {
return DecoratedBox(
decoration: BoxDecoration(
color: index.isEven ? Colors.red : Colors.green,
),
);
},
);
From the above sample code you will get the below customized Spinkit. You will find more Spinkit images in
showcase.dart as shown in below.
In below dart file we are creating different type of Flutter SpinKits
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
class ShowCase extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
title: Text("SpinKit", style: TextStyle(fontSize: 24.0)),
),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 32.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SpinKitRotatingCircle(color: Colors.white),
SpinKitRotatingPlain(color: Colors.white),
SpinKitChasingDots(color: Colors.white),
],
),
const SizedBox(height: 48.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SpinKitPumpingHeart(color: Colors.white),
SpinKitPulse(color: Colors.white),
SpinKitDoubleBounce(color: Colors.white),
],
),
const SizedBox(height: 48.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SpinKitWave(color: Colors.white, type: SpinKitWaveType.start),
SpinKitWave(color: Colors.white, type: SpinKitWaveType.center),
SpinKitWave(color: Colors.white, type: SpinKitWaveType.end),
],
),
const SizedBox(height: 48.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SpinKitThreeBounce(color: Colors.white),
SpinKitWanderingCubes(color: Colors.white),
SpinKitWanderingCubes(
color: Colors.white, shape: BoxShape.circle),
],
),
const SizedBox(height: 48.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SpinKitCircle(color: Colors.white),
SpinKitFadingFour(color: Colors.white),
SpinKitFadingFour(
color: Colors.white, shape: BoxShape.rectangle),
],
),
const SizedBox(height: 48.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SpinKitFadingCube(color: Colors.white),
SpinKitCubeGrid(size: 51.0, color: Colors.white),
SpinKitFoldingCube(color: Colors.white),
],
),
const SizedBox(height: 48.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SpinKitRing(color: Colors.white),
SpinKitDualRing(color: Colors.white),
SpinKitRipple(color: Colors.white),
],
),
const SizedBox(height: 48.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SpinKitFadingGrid(color: Colors.white),
SpinKitFadingGrid(
color: Colors.white, shape: BoxShape.rectangle),
SpinKitHourGlass(color: Colors.white),
],
),
const SizedBox(height: 48.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SpinKitSpinningCircle(color: Colors.white),
SpinKitSpinningCircle(
color: Colors.white, shape: BoxShape.rectangle),
SpinKitFadingCircle(color: Colors.white),
],
),
const SizedBox(height: 48.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
SpinKitPouringHourglass(color: Colors.white),
],
),
const SizedBox(height: 64.0),
],
),
),
);
}
}
In this dart file we are creating spinkitfadingcircle customized image.
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
class WorkSpace extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
width: 300.0,
height: 300.0,
child: SpinKitFadingCircle(
itemBuilder: (_, int index) {
return DecoratedBox(
decoration: BoxDecoration(
color: index.isEven ? Colors.red : Colors.green,
),
);
},
size: 120.0,
),
);
}
}
In this dart file we are importing all the above two files.
import 'package:flutter/material.dart';
import './showcase.dart';
import './workspace.dart';
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'SpinKit Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
brightness: Brightness.dark,
),
home: Scaffold(
body: SafeArea(
child: Stack(
children:
Align(
child: LayoutBuilder(
builder: (context, _) {
return IconButton(
icon: Icon(Icons.play_circle_filled),
iconSize: 50.0,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute
builder: (BuildContext context) => ShowCase(),
fullscreenDialog: true,
),
);
},
);
},
),
alignment: Alignment.bottomCenter,
),
Positioned.fill(
child: Center(
child: WorkSpace(),
),
),
],
),
),
),
);
}
}