/page_view_indicator

👆🏻 Builds indication marks for PageView.

Primary LanguageDartBSD 3-Clause "New" or "Revised" LicenseBSD-3-Clause

PageViewIndicator Pub Package

Builds indication marks for PageView.

Import

import 'package:page_view_indicator/page_view_indicator.dart';

Usage

Default Material behavior

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

Example 1

Custom animations

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

Example 2

Custom icons

It's not just about dots!

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

Example 3

Changing the space bettwen the indicators

You can change the padding around the indicators using the indicatorPadding property:

return PageViewIndicator(
  pageIndexNotifier: pageIndexNotifier,
  length: length,
  indicatorPadding: const EdgeInsets.all(4.0)
  ...

Default is const EdgeInsets.all(8.0).