Customizable Animated Page Indicator with Smooth Transitions
Published on by Flutter News Hub
smooth_page_indicator is a Flutter library that provides a highly customizable and animated page indicator with a variety of built-in effects. It supports infinite loop and RTL layouts.
Usage with PageController:
SmoothPageIndicator( controller: controller, // PageController count: 6, effect: WormEffect(), // Choose an effect onDotClicked: (index) {}, // Handle dot clicks )
Usage without PageController (Self-Animated):
AnimatedSmoothIndicator( activeIndex: yourActiveIndex, count: 6, effect: WormEffect(), )
Effects:
- Worm
- Expanding Dots
- Jumping Dot
- Scrolling Dots
- Slide
- Scale
- Swap
- Color Transition
Customization:
Customize the indicator's direction, dimensions, radius, spacing, paint style, color, and more:
SmoothPageIndicator( axisDirection: Axis.vertical, // Change direction 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 inherits directionality from its ancestors, but can be forced to use a specific direction:
SmoothPageIndicator( textDirection: TextDirection.rtl, // Force RTL layout effect: WormEffect(), )
Code Examples:
Customizable Demo 1:
SmoothPageIndicator( count: 6, effect: CombinedEffect( child: WormEffect( dotHeight: 4.0, dotWidth: 4.0, spacing: 4.0, strokeWidth: 4.0, ), offset: Offset(15.0, 0.0), ), )
Customizable Demo 2:
AnimatedSmoothIndicator( count: 5, effect: SlideEffect( dotHeight: 10.0, dotWidth: 20.0, fixedCenter: true, paintStyle: PaintingStyle.stroke, strokeWidth: 2.0, ), )
Customizable Demo 3:
SmoothPageIndicator( axisDirection: Axis.vertical, count: 12, effect: ScaleEffect( spacing: 10.0, activeDotScale: 2.0, dotScale: 0.5, ), )
Support the Library:
Show your support by liking it on pub, starring it on GitHub, and reporting any bugs you encounter. Your contributions are greatly appreciated.