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


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

This package is not upload to Pub yet. So you need to add it from Git repository:

  dots_indicator: ^0.0.3


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(
  numberOfDot: pageLength,
  position: currentIndexPage

Custom colors

Custom dots colors

new DotsIndicator(
  numberOfDot: pageLength,
  position: currentIndexPage,
  dotColor: Colors.black87,
  dotActiveColor: 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 dotActiveShape

Custom dots size

new DotsIndicator(
  numberOfDot: pageLength,
  position: currentIndexPage,
  dotSize: const Size.square(9.0),
  dotActiveSize: const Size(18.0, 9.0),
  dotActiveShape: 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(
  numberOfDot: pageLength,
  position: currentIndexPage,
  dotShape: const Border(),
  dotActiveShape: 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(
  numberOfDot: pageLength,
  position: currentIndexPage,
  dotSpacing: const EdgeInsets.all(10.0)




Built-in types and core primitives for a Flutter application. [...]


Support for asynchronous programming, with classes such as Future and Stream. [...]
Classes and utilities that supplement the collection support in dart:core. [...]
Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
Built-in types, collections, and other core functionality for every Dart program. [...]
Interact with developer tools such as the debugger and inspector. [...]
Mathematical constants and functions, plus a random number generator. [...]
Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]


File, socket, HTTP, and other I/O support for non-web applications. [...]
Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]