team55/ink_page_indicator

Page indicators for Flutter including an implementation of the InkPageIndicator.

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.1.2

Install packages from the command line

flutter packages get

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,
  ),
)

Contribution

If you like this package, consider giving it a star on GitHub and a like on pub.dev.