Skip to content

Milad-Akarie/smooth_page_indicator

Repository files navigation

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

Scrolling dots effect

Effects

Effect Preview
Worm
Worm style = WormStyle.thin
Worm style = WormStyle.underground
Worm style = WormStyle.thinUnderground
Expanding Dots
Jumping dot
Jumping dot with vertical offset
Scrolling Dots
Slide
Slide style = SlideStyle.slideUnder
Scale
Swap
Swap type = SwapType.yRotation
Color Transition
Customizable demo-1
Customizable demo-2
Customizable demo-3
Customizable demo-4

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


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.

About

Flutter Smooth PageView indicators

Resources

License

Stars

Watchers

Forks

Packages

No packages published