Creative UI Progress

Beautiful, animated, and highly customizable progress indicators for Flutter — linear, circular, and arc.

---

Screenshots

---

Features

• ✨ Linear, Circular, and Arc Progress Indicators
• 🎨 Highly customizable styles (colors, gradients, borders, shapes)
• 🌀 Smooth animations (play, pause, reverse, and control progress)
• 💎 Shimmer and decoration effects
• 🛠️ Controller support for programmatic control
• 🧩 Discrete steps and continuous modes
• 🌙 Dark mode ready
• ⚡ Lightweight and easy to use

---

Installation

Add Creative UI Progress to your project:

flutter pub add creative_ui_progress

---

Usage

Linear Progress Bar

import 'package:creative_ui_progress/creative_ui_progress.dart';

CreativeUIProgressBar(
  value: 50,
  maxValue: 100,
  height: 12,
  progressColor: Colors.blueAccent,
  backgroundColor: Colors.grey.shade200,
  borderRadius: 8,
)

Circular Progress Indicator

import 'package:creative_ui_progress/creative_ui_progress.dart';

CreativeUICircularProgress(
  value: 0.7, // 70%
  size: 64,
  strokeWidth: 8,
  progressColor: Colors.purple,
  backgroundColor: Colors.grey.shade300,
  animate: true,
)

Arc Progress Indicator

import 'package:creative_ui_progress/creative_ui_progress.dart';

CreativeUIArcProgress(
  value: 0.35,
  arcAngle: 240,
  size: 80,
  strokeWidth: 10,
  progressColor: Colors.orange,
  backgroundColor: Colors.black12,
  showText: true,
)

---

Customization

Creative UI Progress offers a rich set of customization options:

• Styles: Set colors, gradients, border radius, thickness, shadows, and more.
• Animations: Enable/disable animation, set animation duration and curve.
• Effects: Add shimmer, glows, or custom decorations to progress or background.
• Behaviors: Use continuous or discrete step modes, show/hide percentage text, and more.

Example: Shimmer & Decoration

CreativeUIProgressBar(
  value: 80,
  maxValue: 100,
  height: 16,
  progressColor: Colors.green,
  progressDecoration: Shimmer.fromColors(
    baseColor: Colors.green,
    highlightColor: Colors.lightGreenAccent,
    child: Container(),
  ),
  backgroundDecoration: DecoratedBox(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.grey.shade200, Colors.grey.shade300],
      ),
    ),
  ),
)

---

Controllers

You can control the progress indicators programmatically using controllers.

final controller = CreativeUIProgressController();

CreativeUIProgressBar(
  value: 0,
  maxValue: 100,
  controller: controller,
)

// Play/animate to a new value
controller.play(value: 75);

// Pause the animation
controller.pause();

// Resume animation
controller.resume();

// Reverse progress (optional: to a specific value)
controller.reverse(toPercentage: 0.2);

---

License

MIT