Ink Page Indicator
A package that offers various page indicators inlcuding a Flutter implementation of the Ink Page Indicator. See below for more examples.
Installing
Add it to your pubspec.yaml file:
dependencies:
ink_page_indicator: ^0.2.1
Install packages from the command line
flutter packages get
If you like this package, consider supporting it by giving it a star on GitHub and a like on pub.dev
Usage
As of now there are two PageIndicators: InkPageIndicator and LeapingPageIndicator. You can see examples of them below.
Every PageIndicator requires an instance of PageIndicatorController which is a PageController that you should assign to your PageView. This allows the PageIndicator to calculate the page count and handle page animations properly.
PageIndicatorController controller;
@override
void initState() {
super.initState();
controller = PageIndicatorController();
}
// Assign to PageView
PageView(
controller: controller,
children: children,
),
Ink Page Indicator
The InkPageIndicator comes with four different styles that you can define using the style parameter:
 |
 |
 |
 |
| InkStyle.normal | InkStyle.simple | InkStyle.translate | InkStyle.transition |
Example
InkPageIndicator(
gap: 32,
padding: 16,
shape: IndicatorShape.circle(13),
inactiveColor: Colors.grey.shade500,
activeColor: Colors.grey.shade700,
inkColor: Colors.grey.shade400,
controller: controller,
style: style,
)
LeapingPageIndicator
A PageIndicator that jumps between the each of its items.
Example
LeapingPageIndicator(
controller: controller,
gap: 32,
padding: 16,
leapHeight: 32,
shape: shape,
activeShape: activeShape,
inactiveColor: Colors.grey.shade400,
activeColor: Colors.grey.shade700,
),
)
Shapes
You can specify different IndicatorShapes for inactive and active indicators and the PageIndicator will interpolate between them as exemplified below.
final shape = IndicatorShape(
width: 12,
height: 20,
borderRadius: BorderRadius.circular(0),
);
final activeShape = IndicatorShape(
width: 12,
height: 40,
borderRadius: BorderRadius.circular(0),
);
InkPageIndicator(
controller: controller,
gap: 32,
padding: 16,
shape: shape,
style: InkStyle.transition,
activeShape: activeShape,
inactiveColor: Colors.grey.shade400,
activeColor: Colors.grey.shade700,
);
23 Nov 6, 2022
2 Apr 1, 2022
3 Apr 13, 2022
1 Sep 17, 2022
13 Oct 12, 2022
51 Dec 23, 2022
7 Nov 26, 2022
0 Dec 29, 2021
3 May 26, 2022
138 Dec 15, 2022