Page Control

A customizable page indicator component that displays the current position within a sequence of pages. The Page Control supports both dot and bar styles, making it suitable for various use cases like carousels, onboarding flows, or image galleries.

---

Variants

Dot Style

Classic dot-style page indicators.

Preview

Code

PageControl(
  total: 5,
  current: 2,
);

---

Bar Style

Modern bar-style page indicators.

Preview

Code

PageControl.bar(
  total: 5,
  current: 2,
);

---

Dot Style on Image

Dot indicators optimized for image backgrounds.

Preview

Code

PageControl(
  total: 5,
  current: 2,
  activeColor: Colors.white,
  inactiveColor: Colors.white.withValues(alpha: .3),
);

---

Bar Style on Image

Bar indicators optimized for image backgrounds.

Preview

Code

PageControl.bar(
  total: 5,
  current: 2,
  activeColor: Colors.white,
  inactiveColor: Colors.white.withValues(alpha: .3),
);

---

Properties

Property	Type	Description
total	int	The total number of pages.
current	int	The current active page index, 0-based.
activeColor	Color?	Color of the active indicator. Defaults to accent color.
inactiveColor	Color?	Color of inactive indicators. Defaults to muted background.
dotSize	double	Size of dots in dot style. Default: 8.0.
barWidth	double	Width of bars in bar style. Default: 32.0.
barHeight	double	Height of bars in bar style. Default: 4.0.
spacing	double	Space between indicators. Default: 8.0.
onPageTapped	ValueChanged<int>?	Callback when an indicator is tapped.