dots_indicator
所属分类：Dart语言编程
开发工具：Dart
文件大小：158KB
下载次数：0
上传日期：2023-05-05 13:19:51
上 传 者：
sh-1993
说明： 为进度添加指示器。您可以自定义指示器（形状、颜色...）
(Add an indicator for a progression. You can customize indicators (shape, color, ..))
文件列表:
CHANGELOG.md (1700, 2023-05-05)
LICENSE (1076, 2023-05-05)
demo (0, 2023-05-05)
demo\custom_color.gif (25149, 2023-05-05)
demo\custom_shape.gif (25958, 2023-05-05)
demo\custom_size.gif (30253, 2023-05-05)
demo\custom_space.gif (25875, 2023-05-05)
demo\normal.gif (6583, 2023-05-05)
example (0, 2023-05-05)
example\.metadata (303, 2023-05-05)
example\android (0, 2023-05-05)
example\android\app (0, 2023-05-05)
example\android\app\build.gradle (1723, 2023-05-05)
example\android\app\src (0, 2023-05-05)
example\android\app\src\debug (0, 2023-05-05)
example\android\app\src\debug\AndroidManifest.xml (342, 2023-05-05)
example\android\app\src\main (0, 2023-05-05)
example\android\app\src\main\AndroidManifest.xml (2157, 2023-05-05)
example\android\app\src\main\kotlin (0, 2023-05-05)
example\android\app\src\main\kotlin\com (0, 2023-05-05)
example\android\app\src\main\kotlin\com\example (0, 2023-05-05)
example\android\app\src\main\kotlin\com\example\example (0, 2023-05-05)
example\android\app\src\main\kotlin\com\example\example\MainActivity.kt (139, 2023-05-05)
example\android\app\src\main\res (0, 2023-05-05)
example\android\app\src\main\res\drawable-v21 (0, 2023-05-05)
example\android\app\src\main\res\drawable-v21\launch_background.xml (438, 2023-05-05)
example\android\app\src\main\res\drawable (0, 2023-05-05)
example\android\app\src\main\res\drawable\launch_background.xml (434, 2023-05-05)
example\android\app\src\main\res\mipmap-hdpi (0, 2023-05-05)
example\android\app\src\main\res\mipmap-hdpi\ic_launcher.png (544, 2023-05-05)
example\android\app\src\main\res\mipmap-mdpi (0, 2023-05-05)
example\android\app\src\main\res\mipmap-mdpi\ic_launcher.png (442, 2023-05-05)
example\android\app\src\main\res\mipmap-xhdpi (0, 2023-05-05)
example\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png (721, 2023-05-05)
... ...
# 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](https://flutter.io/using-packages/).
```yaml
dependencies:
dots_indicator: ^2.1.1
```
## Example
In these examples, `pageLength` is the total of dots to display and `currentIndexPage` is the position to hightlight (the active dot).
### A simple dots indicator
```dart
new DotsIndicator(
dotsCount: pageLength,
position: currentIndexPage,
);
```
### Custom colors
```dart
new DotsIndicator(
dotsCount: pageLength,
position: currentIndexPage,
decorator: DotsDecorator(
color: Colors.black87, // Inactive color
activeColor: Colors.redAccent,
),
);
```
### Use specific color for each dot
You can choose to have one color for inactive dots and one color the active dot.
But you can also define one color by inactive dots (`colors`) and one color by active dot (`activeColors`).
If you have a total of 3 dots, you must provide an array of 3 colors.
```dart
new DotsIndicator(
dotsCount: pageLength,
position: currentIndexPage,
decorator: DotsDecorator(
colors: [Colors.grey[300], Colors.grey[600], Colors.grey[900]], // Inactive dot colors
activeColors: [Colors.red[300], Colors.red[600], Colors.red[900]], // ctive dot colors
),
);
```
### Custom size and shape
You can change the default size of dots and also shape.
So you can choose to have a shape for inactive dots and another shape for the active dot for example.
**By default, the shape of dots are CircleBorder, so to have a rounded rectangle for active one, you need to change `activeShape`**
```dart
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 size for each dot
You can customize the size of each dot, for inactive and/or active dots.
For that, use `sizes` and/or `activeSizes` params.
```dart
new DotsIndicator(
dotsCount: pageLength,
position: currentIndexPage,
decorator: DotsDecorator(
sizes: [
const Size.square(10.0),
const Size.square(15.0),
const Size.square(20.0),
],
activeSizes: [
const Size.square(25.0),
const Size.square(25.0),
const Size.square(35.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.
```dart
new DotsIndicator(
dotsCount: pageLength,
position: currentIndexPage,
decorator: DotsDecorator(
shape: const Border(),
activeShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
),
);
```
### Custom shape for each dot
You can customize the shape of each dot, for inactive and/or active dots.
For that, use `shapes` and/or `activeShapes` params.
```dart
new DotsIndicator(
dotsCount: pageLength,
position: currentIndexPage,
decorator: DotsDecorator(
shapes: [
RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
],
activeShapes: [
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
RoundedRectangleBorder(borderRadius: BorderRadius.circular(25.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.
```dart
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`.
### onTap property
You can add `onTap` property, to listen when a dot has been pressed.
Exemple:
```
onTap: (position) {
setState(() => _currentPos = position);
}
```
近期下载者：
相关文件：
收藏者：