Progress

A customizable progress bar component that visually represents progress with optional labels and alignment.

The Progress widget provides consistent styling and behavior options for progress bars. It supports primary and secondary labels, alignment, and various customization options.

• Customizable: Supports colors, sizes, labels, alignment, and more.
• Labels: Primary and secondary labels for additional context.
• Alignment: Flexible alignment options for labels and progress bars.

---

Variants

Basic Progress Bar

A simple progress bar without labels.

Preview

Code

Progress(
  value: 15,
)

---

Circle Progress Bar

A simple circle progress bar without labels.

Preview

Code

Progress.circle(
  value: 15,
)

---

Circle With Label

A simple circle progress bar with labels.

Preview

Code

Progress.circle(
  value: 15,
  label: '10%',
)

---

Bottom-Left Label

A progress bar with the label aligned to the bottom-left.

Preview

Code

Progress(
  value: 15,
  label: '15% to goal',
)

---

Bottom-Right Label

A progress bar with the label aligned to the bottom-right.

Preview

Code

Progress(
  value: 15,
  alignment: Alignment.bottomRight,
  label: '15% to goal',
)

---

Bottom-Center Label

A progress bar with the label aligned to the bottom-center.

Preview

Code

Progress(
  value: 15,
  alignment: Alignment.bottomCenter,
  label: 'Quota used: 15%',
)

---

Bottom-Center with Both Labels

A progress bar with both primary and secondary labels aligned to the bottom-center.

Preview

Code

Progress(
  value: 15,
  alignment: Alignment.bottomCenter,
  label: '15% to goal',
  secondaryLabel: '7 days left',
)

---

Top-Left Label

A progress bar with the label aligned to the top-left.

Preview

Code

Progress(
  value: 15,
  alignment: Alignment.topLeft,
  label: '15% to goal',
)

---

Top-Right Label

A progress bar with the label aligned to the top-right.

Preview

Code

Progress(
  value: 15,
  alignment: Alignment.topRight,
  label: '15% to goal',
)

---

Top-Center Label

A progress bar with the label aligned to the top-center.

Preview

Code

Progress(
  value: 15,
  alignment: Alignment.topCenter,
  label: 'Quota used: 15%',
)

---

Top-Center with Both Labels

A progress bar with both primary and secondary labels aligned to the top-center.

Preview

Code

Progress(
  value: 15,
  alignment: Alignment.topCenter,
  label: '15% to goal',
  secondaryLabel: '7 days left',
)

---

Center-Left Label

A progress bar with the label aligned to the center-left.

Preview

Code

Progress(
  value: 15,
  alignment: Alignment.centerLeft,
  label: '15% to goal',
)

---

Center-Right Label

A progress bar with the label aligned to the center-right.

Preview

Code

Progress(
  value: 15,
  alignment: Alignment.centerRight,
  label: '15% to goal',
)

---

Center with Both Labels

A progress bar with both primary and secondary labels aligned to the center.

Preview

Code

Progress(
  value: 15,
  alignment: Alignment.center,
  label: '15% to goal',
  secondaryLabel: '7 days left',
)

---

Properties

Property	Type	Description
value	double	The progress value as a percentage (0-100).
label	String?	The primary label displayed alongside the progress bar.
secondaryLabel	String?	The secondary label displayed alongside the progress bar.
backgroundColor	Color?	The background color of the progress bar.
color	Color?	The color of the progress indicator.
valueColor	Animation<Color?>?	The animation for the progress indicator color.
minHeight	double	The minimum height of the progress bar.
borderRadius	BorderRadiusGeometry?	The border radius of the progress bar.
stopIndicatorColor	Color?	The color of the stop indicator.
stopIndicatorRadius	double?	The radius of the stop indicator.
trackGap	double?	The gap between the progress track and the stop indicator.
verticalPadding	double	The vertical padding around the progress bar.
alignment	AlignmentGeometry	The alignment of the progress bar and labels.