smooth_page_indicator

Customizable animated page indicator with a set of built-in effects.

Scrolling dots effect

Effects

Effect	Preview
Worm
Expanding Dots
Jumping dot
Scrolling Dots -> 0.1.5
Slide
Scale
Swap
Color Transition -> 0.1.2

Usage

SmoothPageIndicator uses the PageController's scroll offset to animate the active dot.

SmoothPageIndicator(
	controller: controller,  // PageController
	count:  6,
	effect:  WormEffect(),  // your preferred effect
	onDotClicked: (index){
	    
	}
)

Usage without a PageController v0.2.0+

Unlike SmoothPageIndicator, AnimatedSmoothIndicator is self animated and all it needs is the active index.

AnimatedSmoothIndicator(
	activeIndex: yourActiveIndex,
	count:  6,
	effect:  WormEffect(),
)

Customization

You can customize direction, width, height, radius, spacing, paint style, color and more...

SmoothPageIndicator(
	controller: controller,
	count:  6,
	axisDirection: Axis.vertical,
	effect:  SlideEffect(
		spacing:  8.0,
		radius:  4.0,
		dotWidth:  24.0,
		dotHeight:  16.0,
		paintStyle:  PaintingStyle.stroke,
		strokeWidth:  1.5,
		dotColor:  Colors.grey,
		activeDotColor:  Colors.indigo
	),
)

RTL Support

Smooth page indicator will inherit directionality from its ancestors unless you specify a directionality by passing it directly to the widget or wrapping the Indicator with a Directionality widget from the flutter package.

SmoothPageIndicator(
	controller: controller,  // PageController
	count:  6,

	// forcing the indicator to use a specific direction
	textDirection: TextDirection.rtl
	effect:  WormEffect(),
);

Support the Library

You can support the library by liking it on pub, staring in on Github and reporting any bugs you encounter.