Skip to content

Bdaya-Dev/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 [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.

About

Flutter Smooth PageView indicators

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Dart 94.5%
  • HTML 2.4%
  • Ruby 2.2%
  • Other 0.9%