Percent Indicator Circle

A lightweight and customizable (gradient/color) circular percent indicator widget for Flutter.
Supports solid or gradient progress, styling, and animation.

It displays a circular ring showing the percentage, with an optional central label like 64%.

Features

• Easily specify percent (0.0–1.0), size, stroke width, and background/progress colors
• Support for solid or gradient progress
• Built-in percentage label with customizable style
• Fully stateless and pure widget
• Optional smooth animation for progress changes

Screenshot

Installation

In your pubspec.yaml:

Use

PercentCircleIndicator(
percent: 0.4,
radius: 60,
strokeWidth: 10,
backgroundColor: Colors.blue[900]!,
progressColor: Colors.orange,
textStyle: TextStyle(
color: Colors.white,
fontSize: 24,
fontWeight: FontWeight.bold,
),
animated: true,
duration: Duration(seconds: 1),
)

For solid color:

PercentCircleIndicator(
percent: 0.64,
progress: Colors.orange,
backgroundColor: Colors.grey[900]!,
textStyle: TextStyle(fontSize: 24, color: Colors.white),
)

For gradient:

PercentCircleIndicator(
percent: 0.64,
progress: SweepGradient(
startAngle: 0,
endAngle: 3.14 * 2,
colors: [Colors.red, Colors.orange],
),
backgroundColor: Colors.grey[900]!,
textStyle: TextStyle(fontSize: 24, color: Colors.white),
)

dependencies:
  percent_indicator_circle: ^0.0.5