Progress

A progress indicator visually communicates the completion status of a task, process, or goal. It provides real-time feedback, helping users understand how far along they are and how much is left.

Use progress indicators for loading states, task completion, quotas, or goal tracking where users need visibility of progress.

Common Alternative Names:
Progress Bar, Progress Indicator, Loading Bar

---

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.