Percent Indicator Circle

A lightweight and customizable circular percent indicator widget for Flutter.
Supports styling and animation. It displays a circular ring showing the percentage, with an optional central label like "40%".

Features

  • Easily specify percent (0.0–1.0), size, stroke width, and colors
  • Built-in percentage label, stylable
  • Fully stateless and pure widget
  • Animate progress changesp

Screenshot

Percent Indicator Circle Screenshot at Jun 12 12-32-04

Installation

In your pubspec.yaml:

Use

  • PercentCircleIndicator(
  • percent: 0.4,
  • radius: 60,
  • strokeWidth: 10,
  • backgroundColor: Colors.blue900!,
  • progressColor: Colors.orange,
  • textStyle: TextStyle(
  • color: Colors.white,
  • fontSize: 24,
  • fontWeight: FontWeight.bold,
  • ),
  • animated: true,
  • duration: Duration(seconds: 1),
  • )
dependencies:
  percent_indicator_circle: ^1.0.4

Libraries

percent_indicator_circle