https://github.com/leocavalcante/page_view_indicator
👆🏻 Builds indication marks for PageView.
https://github.com/leocavalcante/page_view_indicator
Last synced: 7 months ago
JSON representation
👆🏻 Builds indication marks for PageView.
- Host: GitHub
- URL: https://github.com/leocavalcante/page_view_indicator
- Owner: leocavalcante
- License: bsd-3-clause
- Created: 2018-07-21T00:36:16.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-11-03T04:07:24.000Z (about 4 years ago)
- Last Synced: 2025-04-09T15:08:21.127Z (7 months ago)
- Language: Dart
- Homepage:
- Size: 606 KB
- Stars: 164
- Watchers: 3
- Forks: 28
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-flutter-cn - PageView Indicator - 为PageView构建页面指示器，由 [Leo Cavalcante](https://github.com/leocavalcante) 制作。 (组件 / 导航)
- awesome-flutter-cn - PageView Indicator - 为 PageView 构建的页面指示器，[Leo Cavalcante](https://github.com/leocavalcante). (组件 / 导航)
- awesome-flutter - PageView Indicator - 👆🏻 Builds indication marks for PageView. ` 📝 a year ago ` (Navigation [🔝](#readme))
- fucking-awesome-flutter - PageView Indicator - Build page indicators for the PageView by [Leo Cavalcante](https://github.com/leocavalcante). (Components / Navigation)
- awesome-flutter - PageView Indicator - Build page indicators for the PageView by [Leo Cavalcante](https://github.com/leocavalcante). (Components / Navigation)
README
# PageViewIndicator [](https://pub.dartlang.org/packages/page_view_indicator)
Builds indication marks for PageView.
## Import
```dart
import 'package:page_view_indicator/page_view_indicator.dart';
```
## Usage
### Default Material behavior
```dart
return PageViewIndicator(
pageIndexNotifier: pageIndexNotifier,
length: length,
normalBuilder: (animationController, index) => Circle(
size: 8.0,
color: Colors.black87,
),
highlightedBuilder: (animationController, index) => ScaleTransition(
scale: CurvedAnimation(
parent: animationController,
curve: Curves.ease,
),
child: Circle(
size: 12.0,
color: Colors.black45,
),
),
);
```
---
### Custom animations
```dart
return PageViewIndicator(
pageIndexNotifier: pageIndexNotifier,
length: length,
normalBuilder: (animationController, index) => Circle(
size: 8.0,
color: Colors.black87,
),
highlightedBuilder: (animationController, index) => ScaleTransition(
scale: CurvedAnimation(
parent: animationController,
curve: Curves.ease,
),
child: Circle(
size: 8.0,
color: Colors.white,
),
),
);
```
---
### Custom icons
It's not just about dots!
```dart
return PageViewIndicator(
pageIndexNotifier: pageIndexNotifier,
length: length,
normalBuilder: (animationController, index) => ScaleTransition(
scale: CurvedAnimation(
parent: animationController,
curve: Curves.ease,
),
child: Icon(
Icons.favorite,
color: Colors.black87,
),
),
highlightedBuilder: (animationController, index) => ScaleTransition(
scale: CurvedAnimation(
parent: animationController,
curve: Curves.ease,
),
child: Icon(
Icons.star,
color: Colors.white,
),
),
);
```
### Changing the space bettwen the indicators
You can change the padding around the indicators using the `indicatorPadding` property:
```dart
return PageViewIndicator(
pageIndexNotifier: pageIndexNotifier,
length: length,
indicatorPadding: const EdgeInsets.all(4.0)
...
```
Default is `const EdgeInsets.all(8.0)`.