CircularPercentIndicator class

A beautiful and customizable circular percent indicator widget.

This widget displays progress in a circular format with extensive customization options including gradients, animations, and center content.

Example usage:

CircularPercentIndicator(
  percent: 0.75,
  radius: 60,
  lineWidth: 10,
  progressColor: Colors.blue,
  backgroundColor: Colors.grey.shade300,
  center: Text('75%'),
  animation: true,
)

With child positioning:

CircularPercentIndicator(
  percent: 0.75,
  radius: 60,
  child: Icon(Icons.check),
  childPosition: CircularChildPosition.center,
)
Inheritance

Constructors

CircularPercentIndicator({Key? key, double percent = 0.0, double radius = 50.0, double lineWidth = 5.0, double? backgroundWidth, Color progressColor = Colors.blue, Color backgroundColor = const Color(0xFFE0E0E0), Gradient? linearGradient, Gradient? backgroundGradient, bool fillColor = false, Color? circleColor, CircularStrokeCap circularStrokeCap = CircularStrokeCap.round, CircularStartAngle startAngle = CircularStartAngle.top, bool reverse = false, bool animation = false, Duration animationDuration = const Duration(milliseconds: 500), Curve animationCurve = Curves.easeInOut, Widget? center, Widget? header, Widget? footer, bool rotateLinearGradient = false, VoidCallback? onAnimationEnd, bool restartAnimation = false, ArcType? arcType, Color? arcBackgroundColor, bool animateFromLastPercent = false, Widget? child, CircularChildPosition childPosition = CircularChildPosition.center, bool showPercentage = false, TextStyle? percentageTextStyle, int percentageDecimals = 0, bool addPercentSign = true, double spacing = 8.0})
Creates a circular percent indicator widget.
const

Properties

addPercentSign → bool
Whether to add percent symbol.
final
animateFromLastPercent → bool
Whether to animate from last percent or from 0.
final
animation → bool
Whether to animate progress changes.
final
animationCurve → Curve
The curve for the animation.
final
animationDuration → Duration
The duration of the animation.
final
arcBackgroundColor → Color?
The background arc color when using arc type.
final
arcType → ArcType?
Custom arc type for different visual styles.
final
backgroundColor → Color
The background color of the circle.
final
backgroundGradient → Gradient?
Optional gradient for the background circle.
final
backgroundWidth → double?
The width of the background circle line. If null, uses lineWidth.
final
center → Widget?
Widget to display in the center of the circle.
final
child → Widget?
Child widget with configurable position. Use this instead of center/header/footer for more control.
final
childPosition → CircularChildPosition
Position of the child widget.
final
circleColor → Color?
The fill color when fillColor is true.
final
circularStrokeCap → CircularStrokeCap
The style of the line cap.
final
fillColor → bool
Whether to fill the background completely.
final
Widget to display as a footer below the circle.
final
hashCode → int
The hash code for this object.
no setterinherited
Widget to display as a header above the circle.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
linearGradient → Gradient?
Optional gradient for the progress indicator. If provided, overrides progressColor.
final
lineWidth → double
The width of the progress line.
final
onAnimationEnd → VoidCallback?
Callback when animation completes.
final
percent → double
The progress value between 0.0 and 1.0.
final
percentageDecimals → int
Number of decimal places for percentage display.
final
percentageTextStyle → TextStyle?
Text style for percentage text.
final
progressColor → Color
The color of the progress indicator.
final
radius → double
The radius of the circle (from center to the middle of the stroke).
final
restartAnimation → bool
Whether to restart animation from 0 when percent changes.
final
reverse → bool
Whether to reverse the progress direction.
final
rotateLinearGradient → bool
Whether to add rotation animation.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
showPercentage → bool
Whether to show percentage text automatically.
final
spacing → double
Spacing between circle and header/footer.
final
startAngle → CircularStartAngle
The starting angle for the progress.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<CircularPercentIndicator>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited