Custom ProgressBar

🚀 A lightweight and customizable circular progress bar for Flutter.

Supports flexible sizing, custom center widgets (Text, Icon, Image), and full theming control.

---

✨ Features

• ✅ Simple and clean API
• 🎯 Custom center widget (Icon, Text, Image, etc.)
• 🎨 Custom colors & stroke width
• 📱 Lightweight & easy to use
• 🔄 Backward compatibility with legacy API

---

📦 Installation

Add this to your pubspec.yaml:

dependencies:
  custom_progressbar: 2.0.0

🚀 Getting Started

Import the package:
import 'package:custom_progressbar/custom_progressbar.dart';

---

📸 Preview

Default ProgressBar

Custom Colors

With Icon Center

With Text Center

With Progress Value

With Image Center

---

🧪 Example

Check the /example folder for a complete working app.

🚀 Usage

1. Basic

Center(
  child: ProgressBar(),
)

---

2. Custom Colors

ProgressBar(
  size: 50,
  progressColor: Colors.amber,
  progressBackgroundColor: Colors.green,
)

---

3. With Icon

ProgressBar(
  size: 50,
  progressColor: Colors.amber,
  progressBackgroundColor: Colors.green,
  center: Icon(Icons.g_mobiledata_rounded),
)

---

4. With Text

ProgressBar(
  size: 80,
  progressColor: Colors.amber,
  progressBackgroundColor: Colors.green,
  center: Text(
    'Progress',
    style: TextStyle(fontSize: 12),
  ),
)

---

5. With Progress Value

ProgressBar(
  size: 80,
  progressColor: Colors.amber,
  progressBackgroundColor: Colors.green,
  progressStrokeWidth: 6,
  progress: 0.8,
  center: Text(
    'Progress',
    style: TextStyle(fontSize: 12),
  ),
)

---

6. With Image

ProgressBar(
  size: 90,
  progressColor: Colors.amber,
  progressBackgroundColor: Colors.green,
  progressStrokeWidth: 2,
  center: Image.asset('assets/img.png'),
)

---

⚙️ Parameters (New API)

Parameter	Description
size	Size of the progress bar (width & height)
progress	Value from 0.0 to 1.0
center	Widget displayed in center (Text, Icon, Image, etc.)
progressColor	Color of progress indicator
progressBackgroundColor	Background track color
progressStrokeWidth	Thickness of progress

---

🔄 Migration Guide

Old API (Deprecated)

ProgressBar(
containerHeight: 40,
containerWidth: 40,
progressColor: Colors.red,
boxFit: BoxFit.contain,
iconHeight: 30,
iconWidth: 30,
imageFile: 'assets/icon.png',
progressStrokeWidth: 3.0,
progressHeight: 50,
progressWidth: 50,
),

---

New API (Recommended)

ProgressBar(
  size: 40,
  progress: 0.7,
  progressStrokeWidth: 3.0,
  center: Image.asset('assets/icon.png'),
)

---

⚠️ Deprecated API (Legacy Support)

The old API is still supported for backward compatibility, but not recommended for new projects.

Mapping to New API

Old API	New API
containerHeight, containerWidth	size
imageFile	center: Image.asset()
iconHeight, iconWidth	handled inside center
boxFit	handled inside center
progressHeight, progressWidth	auto-managed

---

📌 Notes

• progress value should be between 0.0 and 1.0
• Values outside this range will be clamped internally
• Use center for flexible content instead of imageFile

---

💡 Upcoming Features

• 🎨 Gradient support
• ⚡ CustomPainter-based rendering
• 🎬 Smooth animations
• 📊 Multi-segment progress
• 🔄 Clockwise / Anti-clockwise progress

---

❤️ Support

If you like this package, consider giving it a ⭐ on GitHub!

📄 License

MIT License © 2026 Rahul Kushwaha