loading_animation_widget

Install package

flutter pub add loading_animation_widget

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package providing customizable loading animations, spinners, and loaders to visually indicate loading or processing states in apps. It supports various animation styles and is ideal for enhancing user experience during asynchronous operations. The widget is lightweight, easy to integrate, and works across all major platforms including Android, iOS, Web, macOS, Windows, and Linux. Perfect for showing progress when data is being fetched or tasks are underway.

Use cases

Displaying loading state during API calls
Indicating background processing
Enhancing UI during data fetching
Showing app initialization progress
Improving UX during screen transitions

Key features

Multiple built-in animation styles
Customizable size and color
Cross-platform compatibility
Simple integration with Flutter
Lightweight and performant
Supports both circular and linear loaders

Suitable for

Developers building responsive UIs
Apps requiring visual feedback during async operations
UI/UX designers seeking animated indicators
Projects targeting multiple platforms

Considerations

May require additional styling for complex designs
Limited customization beyond basic properties
Not optimized for extremely high-frequency updates

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

How to use

Installation

Add loading_animation_widget: to your pubspec.yaml dependencies then run flutter pub get

 dependencies:
  loading_animation_widget:

Import

Add this line to import the package.

import 'package:loading_animation_widget/loading_animation_widget.dart';

All loading animation APIs are 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.

Loading animation with one color

Scaffold(
    body: Center(
      child: LoadingAnimationWidget.staggeredDotsWave(
        color: Colors.white,
        size: 200,
      ),
    ),

Loading animation with more than one color. You have to provide both required colors.

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