custom_dots_indicator

Description:

custom dots indicator

Introduction #
This package provides a Dots Indicator of which the developer can customise anything that's needed to. Here's what you can customise:

Number of Dots
Provide a Label and customise it
Customise each Dot/Label for the current scroll index and by the Dot index

Note: Currently, only supports the use of a ScrollController for your scrollable views. You can also use PageController here because it is an instance of ScrollController.
To learn more about the why's and the how's of this package, see this article.

Usage #
You can start using this package by simply calling:
/// For the Generic use-case of all dots
CustomDotsIndicator()

/// If your app needs a Label
CustomDotsIndicator.withLabel()

/// If the need to completely customise
/// the label and other dots arises
CustomDotsIndicator.custom()
copied to clipboard
Parameters
Required


listLength
This is the length of the list for which the indicator is to be used.
This helps calculate the range for which the active dot position would be calculated.


controller
The ScrollController instance to be provided to your scrollable widget.
This helps the widget receive updates on ScrollController updates an helps with further calculations.


Optional (Present for all cases)


dotsCount
This is the number of dots you want for your indicator.
Defaults to 3.


dotsDistance
This is the space to be used between the dots.
Defaults to 8 px.


activeDotRadius
The radius to be used for each of the active dots.
Defaults to 4 px.


inactiveDotRadius
The radius to be used for each of the inactive dots.
Defaults to 4 px.


activeDotColor
The color to be used for the active dot.


inactiveDotRadius
The color to be used for each of the inactive dots.


customDotSpaceBuilder
Helps customise the space between the dots.


customDotsTransition
Animation to use for building the active/inactive dots.


Customisation #
CustomDotsIndicator.withLabel offers two optional parameters:


labelStyle
This helps customise the default text on the default Label.


selectedLabelBuilder
This helps customise and build your own Label widget from two variables:

currentIndex: the calculated visible item on the screen,
dotIndex: the position of the current dot.




CustomDotsIndicator.custom offers one more optional parameter with the above listed two:


unselectedDotBuilder
This helps bring the inactive dots under customisation. Much like the selectedLabelBuilder, it takes the same two variables but uses them to render the inactive dots.