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
new DotsIndicator(
dotsCount: pageLength,
position: currentIndexPage
)
Custom 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
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.
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.
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
Dart
- dart:ffi
- Foreign Function Interface for interoperability with the C programming language. [...]
- 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.