Flutter – Loading Animation Widget

In every mobile application, there is a loading animation with different colors and styles, basically, we use the loading animation when we are waiting for something. Like if we are fetching the data from the database then we have to wait for some time until the data is not fetched. So in this duration, we will show the loading animation or loading bars. We also use the loading animation during the application initialization. This will improve the user experience. So, In this article, we create an amazing loading animation for our applications. A sample video is given below to get an idea about what we are going to do in this article.

Step by Step Implementation

Step 1: Create a New Project in Android Studio or in the VSCode as your IDE

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Installation of package

Install the package into the pubspec.yaml file that you will find in the root directory of the project.

Dart

flutter pub add loading_animation_widget

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

Dart

dependencies:
  loading_animation_widget:

Step 3: Import the package

Dart

import 'package:loading_animation_widget/loading_animation_widget.dart';

All loading animation APIs are the same straight forward. There is a static method for each animation inside LoadingAnimationWidget class, which returns the Object of that animation. Both size and color are required some animations need more than one color. You can use the class followed by the function to use the individual loading animations.

– Loading animation with one color with simple style.

Dart

Scaffold( // scaffold of the app
    body: Center(
      child: LoadingAnimationWidget.staggeredDotWave( // LoadingAnimationwidget that call the
        color: Colors.green,                          // staggereddotwave animation
        size: 50,
      ),
    ),

– Loading animation with two colors with advance style.

Dart

Scaffold(
    body: Center(
        child: LoadingAnimationWidget.twistingDots(
          leftDotColor: const Color(0xFF1A1A3F),
          rightDotColor: const Color(0xFFEA3799),
          size: 50,
        ),
      ),

List of Animations

• waveDots
• inkDrop
• twistingDots
• threeRotatingDots
• staggeredDotsWave
• fourRotatingDots
• fallingDot
• progressiveDots
• discreteCircular
• threeArchedCircle
• bouncingBall
• flickr
• hexagonDots
• beat
• twoRotatingArc
• horizontalRotatingDots
• newtonCradle
• stretchedDots
• halfTriangleDot
• dotsTriangle

Note: You have to give both colors otherwise it will raise the error.

Code Example

Dart

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

void main() {
  runApp(myApp());
}

class myApp extends StatefulWidget {
  const myApp({super.key});

  @override
  State<myApp> createState() => _myAppState();
}

class _myAppState extends State<myApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Loading Animation widget'),
        ),
        body: Column(
          children: [
            ListTile(
              leading: LoadingAnimationWidget.twistingDots(
                leftDotColor: const Color(0xFF1A1A3F),
                rightDotColor: Color.fromARGB(255, 12, 110, 42),
                size: 50,
              ),
              title: Text(
                'twisting Dots',
                textScaleFactor: 1.5,
              ),
            ),
            SizedBox(height: 20,),
            ListTile(
              leading: LoadingAnimationWidget.staggeredDotsWave(
                color: Color.fromARGB(255, 26, 153, 68),
                size: 50,
              ),
              title: Text(
                'staggered dots wave',
                textScaleFactor: 1.5,
              ),
            ),
            SizedBox(height: 20,),
            ListTile(
              leading: LoadingAnimationWidget.inkDrop(
                color: Color.fromARGB(255, 26, 153, 68),
                size: 50,
              ),
              title: Text(
                'inkDrop',
                textScaleFactor: 1.5,
              ),
            ),
            SizedBox(height: 20,),
            ListTile(
              leading: LoadingAnimationWidget.bouncingBall(
                color: Color.fromARGB(255, 26, 153, 68),
                size: 50,
              ),
              title: Text(
                'bouncingBall',
                textScaleFactor: 1.5,
              ),
            ),
            SizedBox(height: 20,),
            ListTile(
              leading: LoadingAnimationWidget.flickr(
                leftDotColor: const Color(0xFF1A1A3F),
                rightDotColor: Color.fromARGB(255, 12, 110, 42),
                size: 50,
              ),
              title: Text(
                'staggered dots wave',
                textScaleFactor: 1.5,
              ),
            ),
            SizedBox(height: 20,),
            ListTile(
              leading: LoadingAnimationWidget.fourRotatingDots(
                color: Color.fromARGB(255, 12, 110, 42),
                size: 50,
              ),
              title: Text(
                'staggered dots wave',
                textScaleFactor: 1.5,
              ),
            ),
            SizedBox(height: 20,),
            ListTile(
              leading: LoadingAnimationWidget.newtonCradle(
                color: Color.fromARGB(255, 12, 110, 42),
                size: 50,
              ),
              title: Text(
                'staggered dots wave',
                textScaleFactor: 1.5,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Output: