dots_indicator 0.0.5+1 copy "dots_indicator: ^0.0.5+1" to clipboard
dots_indicator: ^0.0.5+1 copied to clipboard

outdated

Dots indicator to show progression of a PageView for example

dots_indicator #

Widget to display dots indicator to show a position (for a PageView for example).

Installation #

You just need to add dots_indicator as a dependency in your pubspec.yaml file.

dependencies:
  dots_indicator: ^0.0.5

Example #

In these example, pageLength is the total of dots to display and currentIndexPage is the position to hightlight (the active dot).

A simple dots indicator #

Simple dots

new DotsIndicator(
  dotsCount: pageLength,
  position: currentIndexPage
)

Custom colors #

Custom dots colors

new DotsIndicator(
  dotsCount: pageLength,
  position: currentIndexPage,
  decorator: DotsDecorator(
    color: Colors.black87,
    activeColor: Colors.redAccent,
  ),
)

Custom size #

You can change the default size of dots.
So you can choose to have dots for no active positions and a rounded rectangle for active position for example.
By default, the shape of dots is CircleBorder, so to have a rounded rectangle for active, you need to change activeShape

Custom dots size

new DotsIndicator(
  dotsCount: pageLength,
  position: currentIndexPage,
  decorator: DotsDecorator(
    size: const Size.square(9.0),
    activeSize: const Size(18.0, 9.0),
    activeShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
  ),
)

Custom shape #

You can change the default shape of dots. By default it's a CircleBorder.
You can change the no active and active dot shape.

Custom dots shape

new DotsIndicator(
  dotsCount: pageLength,
  position: currentIndexPage,
  decorator: DotsDecorator(
    shape: const Border(),
    activeShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
  ),
)

Change the space between dots #

By default a dot have a margin of 6 pixels on his left and right. It's EdgeInsets.symmetric(horizontal: 6.0). But if you want you can change it, for example to increase the space between dots or to add top margin.

Custom dots space

new DotsIndicator(
  dotsCount: pageLength,
  position: currentIndexPage,
  decorator: DotsDecorator(
    spacing: const EdgeInsets.all(10.0),
  ),
)
664
likes
30
pub points
99%
popularity

Publisher

unverified uploader

Dots indicator to show progression of a PageView for example

Repository (GitHub)
View/report issues

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on dots_indicator