Customizable Animated Page Indicator with Smooth Transitions

Published on by Flutter News Hub

Customizable Animated Page Indicator with Smooth Transitions

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.

Flutter News Hub