https://github.com/7span/flutter-gradient-progress-bar
A comprehensive Flutter package for both Android and iOS that provides beautiful, customisable progress indicators with gradient-filled and colourful circular designs.
https://github.com/7span/flutter-gradient-progress-bar
dart flutter
Last synced: 17 days ago
JSON representation
A comprehensive Flutter package for both Android and iOS that provides beautiful, customisable progress indicators with gradient-filled and colourful circular designs.
- Host: GitHub
- URL: https://github.com/7span/flutter-gradient-progress-bar
- Owner: 7span
- License: mit
- Created: 2022-07-09T04:59:17.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2025-05-28T13:31:31.000Z (10 months ago)
- Last Synced: 2025-12-03T00:31:19.657Z (4 months ago)
- Topics: dart, flutter
- Language: C++
- Homepage:
- Size: 257 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Flutter Progress Indicators
  
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
```dart
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
```dart
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 [
GradientProgressIndicator([
Color(0xffF68270),
Color(0xffF1C358),
Color(0xffEFDE62),
Color(0xffE5F3BE),
Color(0xffCDE8F1),
Color(0xffDDC5EE),
Color(0xffF2E0F9),
], 0.8)
],
),
),
);
}
}
```
### Complete Example
```dart
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` | 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` | 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:
- [Progress Example](https://github.com/urvashik-7span/gradient_progress_bar/tree/main/example)
## Contributors
### Gradient Progress Bar
**[Urvashi Kharecha](https://www.linkedin.com/in/urvashi-kharecha/)**
### Colorful Circular Progress Indicator
**[Ruchit Soni](https://www.linkedin.com/in/ruchit-soni/)**
## Issues & Support
Having issues? File them here:
- [Issues](https://github.com/7span/flutter-gradient-progress-bar/issues)
## Contributing
**🤘🏻 Great!** We welcome contributions to both packages.
### For Progress Bar:
1. Fork the [Repository](https://github.com/7span/flutter-gradient-progress-bar)
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](CHANGELOG.md) for details about changes in each version.
---
**Made with ❤️ by the Flutter community**