Skip to content
Add an indicator for a progression. You can customize indicators (shape, color, ..)
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo Edit gif images Aug 11, 2018
lib Fix assert on position property May 17, 2019
.gitignore
CHANGELOG.md Fix assert on position property May 17, 2019
LICENSE Update package by creating a decorator class and some other improvements May 16, 2019
README.md Update package by creating a decorator class and some other improvements May 16, 2019
pubspec.yaml Fix assert on position property May 17, 2019

README.md

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),
  ),
)
You can’t perform that action at this time.