infinite_loading

A modern Flutter package for rendering a highly customizable infinite oscillating loading widget with smooth completion animations.

Flutter Dart

Demo

Success Error Variations
Success Error Variations

Features

✨ Smooth Oscillating Animation - A progress bar that moves back and forth infinitely (left-right-left) 🎨 Fully Customizable - Configure colors, sizes, borders, speeds, and more ✅ Completion States - Beautiful animations for success (green checkmark) and error (red X) states 🚀 Zero Dependencies - Uses only Flutter's built-in animation framework 📱 Modern & Null-Safe - Built with Flutter 3.0+ and null safety

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  infinite_loading: ^1.0.0

Or install it from the command line:

flutter pub add infinite_loading

Usage

Basic Example

import 'package:infinite_loading/infinite_loading.dart';

InfiniteLoading(
  width: 200,
  height: 8,
)

Interactive Example

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool? _completeWithSuccess;

  void _simulateAsyncOperation() async {
    // Start loading (set to null for infinite loading)
    setState(() => _completeWithSuccess = null);

    // Simulate some work
    await Future.delayed(Duration(seconds: 2));

    // Complete with success
    setState(() => _completeWithSuccess = true);

    // Or complete with error
    // setState(() => _completeWithSuccess = false);
  }

  @override
  Widget build(BuildContext context) {
    return InfiniteLoading(
      width: 200,
      height: 8,
      completeWithSuccess: _completeWithSuccess,
    );
  }
}

Customization Examples

Custom Colors

InfiniteLoading(
  width: 220,
  height: 10,
  trackColor: Color(0xFF2C3E50),
  progressColor: Color(0xFF3498DB),
  borderColor: Color(0xFF3498DB),
  borderWidth: 3,
)

Custom Speed

// Fast animation
InfiniteLoading(
  width: 200,
  height: 8,
  oscillationDuration: Duration(milliseconds: 600),
)

// Slow animation
InfiniteLoading(
  width: 200,
  height: 8,
  oscillationDuration: Duration(milliseconds: 2400),
)

Custom Progress Bar Size

InfiniteLoading(
  width: 240,
  height: 10,
  progressBarWidth: 80, // Wider progress bar
)

Parameters

Parameter Type Default Description
width double 200.0 Width of the loading widget container
height double 8.0 Height of the loading widget container
trackColor Color Colors.white Background color of the track
progressColor Color Color(0xFFFFD421) Color of the oscillating progress bar
borderColor Color Colors.grey Color of the border during loading
borderWidth double 2.0 Width of the border
borderRadius double 14.0 Border radius for rounded corners
oscillationDuration Duration Duration(milliseconds: 1200) Duration for one complete oscillation cycle
progressBarWidth double 40.0 Width of the moving progress bar
completeWithSuccess bool? null Completion state: null = infinite, true = success, false = error
successColor Color Color(0xFF4CAF50) Color for success state
errorColor Color Color(0xFFF44336) Color for error state
completionAnimationDuration Duration Duration(milliseconds: 400) Duration for completion animation

Completion States

The widget supports three states controlled by the completeWithSuccess parameter:

  • null - Infinite loading (default) - the bar oscillates continuously
  • true - Success - animates to a green checkmark icon
  • false - Error - animates to a red X icon

When transitioning to a completion state, the widget smoothly animates into a circular shape with the appropriate icon.

Example App

Check out the /example folder for a complete demo app showcasing all features and customization options.

To run the example:

cd example
flutter pub get
flutter run

Migration from 0.x

If you're upgrading from version 0.x, note these breaking changes:

  • Null safety: The package now requires Dart 3.0+
  • No external dependencies: simple_animations is no longer needed
  • Icon-based completion: Uses Flutter's built-in icons instead of image assets
  • New parameters: Many new customization options available
  • Constructor changes: @required is now replaced with named optional parameters

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Created and maintained by dmvvilela

Libraries

infinite_loading