smooth_page_indicator 1.0.0+2 icon indicating copy to clipboard operation
smooth_page_indicator: ^1.0.0+2 copied to clipboard

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

smooth_page_indicator #

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

MIT License stars pub version Buy Me A Coffee


infinite Loop support [new]

Scrolling dots effect

Effects #

| Effect | Preview |
| :---------------------------------------- | :-------------------------------------------------------------------------------------------------------: |
| Worm | | | Worm style = WormStyle.thin [v1.0.0] | | | Expanding Dots | | | Jumping dot | | | Jumping dot with vertical offset [v1.0.0]| | | Scrolling Dots -> 0.1.5 | | | Slide | | | Scale | | | Swap | | | Swap type = SwapType.yRotation [v1.0.0]| | | Color Transition [0.1.2] | | | Customizable demo-1 [v1.0.0] | | | Customizable demo-2 [v1.0.0] | | | Customizable demo-3 [v1.0.0] | | | Customizable demo-4 [v1.0.0] | |

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.

1403
likes
120
pub points
99%
popularity

Publisher

unverified uploader

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on smooth_page_indicator