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: ^1.0.0

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),
  ),
)

Axis and reverse property

There is two other property, axis and reversed. Axis is to display dots indicator horizontally (default) or vertically. Also, you can set reversed: true to reverse the order of dots. (default: false).

For example, if you want to display the dots indicator vertically, but with the first dots on bottom : Set axis: Axis.vertical and reversed: true. Obviously, you can use reversed with Axis.horizontal.

Libraries

dots_indicator

Dart

VM

dart:ffi
Foreign Function Interface for interoperability with the C programming language. [...]

Web

dart:html
HTML elements and other resources for web-based applications that need to interact with the browser and the DOM (Document Object Model). [...]
dart:js
Low-level support for interoperating with JavaScript. [...]
dart:js_util
Utility methods to efficiently manipulate typed JSInterop objects in cases where the name to call is not known at runtime. You should only use these methods when the same effect cannot be achieved with @JS annotations. These methods would be extension methods on JSObject if Dart supported extension methods.