Flutter Progress Indicators

Pub Version Flutter Version Dart Version

A comprehensive Flutter package for both Android and iOS that provides beautiful, customizable progress indicators with gradient and colorful circular designs.

Features

  • Colorful Circular Progress Indicator: Multi-colored circular progress indicator with smooth animations
  • Gradient Progress Bar: Linear progress bar with customizable gradient colors
  • Cross-platform support (Android & iOS)
  • Smooth animations and transitions
  • Highly customizable color schemes

Screenshots

Component Demo
Gradient Indicator
Circuler Indicator

Usage

Colorful Circular Progress Indicator

import 'package:colorful_circular_progress_indicator/colorful_circular_progress_indicator.dart';

class CircularProgressExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ColorfulCircularProgressIndicator(
          colors: [
            Colors.red,
            Colors.orange,
            Colors.yellow,
            Colors.green,
            Colors.blue,
            Colors.indigo,
            Colors.purple,
          ],
          strokeWidth: 8.0,
          radius: 50.0,
          progress: 0.7,
        ),
      ),
    );
  }
}

Gradient Progress Bar

import 'package:gradient_progress_bar/gradient_progress_bar.dart';

class GradientProgressExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const <Widget>[
            GradientProgressIndicator([
              Color(0xffF68270),
              Color(0xffF1C358),
              Color(0xffEFDE62),
              Color(0xffE5F3BE),
              Color(0xffCDE8F1),
              Color(0xffDDC5EE),
              Color(0xffF2E0F9),
            ], 0.8)
          ],
        ),
      ),
    );
  }
}

Complete Example

import 'package:flutter/material.dart';
import 'package:colorful_circular_progress_indicator/colorful_circular_progress_indicator.dart';
import 'package:gradient_progress_bar/gradient_progress_bar.dart';

class ProgressIndicatorsDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Progress Indicators Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            // Colorful Circular Progress Indicator
            ColorfulCircularProgressIndicator(
              colors: [
                Colors.red,
                Colors.orange,
                Colors.yellow,
                Colors.green,
                Colors.blue,
                Colors.indigo,
                Colors.purple,
              ],
              strokeWidth: 8.0,
              radius: 50.0,
              progress: 0.7,
            ),
            
            // Gradient Progress Bar
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20),
              child: GradientProgressIndicator([
                Color(0xffF68270),
                Color(0xffF1C358),
                Color(0xffEFDE62),
                Color(0xffE5F3BE),
                Color(0xffCDE8F1),
                Color(0xffDDC5EE),
                Color(0xffF2E0F9),
              ], 0.8),
            ),
          ],
        ),
      ),
    );
  }
}

API Reference

ColorfulCircularProgressIndicator

Parameter Type Description Default
colors List<Color> List of colors for the progress indicator Required
strokeWidth double Width of the progress stroke 4.0
radius double Radius of the circular indicator 20.0
progress double Progress value (0.0 to 1.0) 0.0

GradientProgressIndicator

Parameter Type Description Default
colors List<Color> List of gradient colors Required
progress double Progress value (0.0 to 1.0) Required
height double Height of the progress bar 8.0
borderRadius double Border radius of the progress bar 4.0

Examples

For more detailed examples, check out:

Contributors

Gradient Progress Bar

Urvashi Kharecha linedin_logo

Colorful Circular Progress Indicator

Ruchit Soni linedin_logo

Issues & Support

Having issues? File them here:

Contributing

🤘🏻 Great! We welcome contributions to both packages.

For Progress Bar:

  1. Fork the Repository
  2. Update Code
  3. Write a meaningful Commit Message
  4. Send a PR

That's all you need to contribute!

License

This project is licensed under the MIT License - see the individual package repositories for details.

Changelog

See CHANGELOG.md for details about changes in each version.


Made with ❤️ by the Flutter community