page_view_indicator 2.0.4

Flutter Android iOS web

Builds indication marks for PageView from any Widget and/or Animation.

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

17
likes
100
pub points
92%
popularity

Builds indication marks for PageView from any Widget and/or Animation.

Repository (GitHub)
View/report issues

Documentation

API reference

Uploader

lc@leocavalcante.com

License

BSD (LICENSE)

Dependencies

flutter

More

Packages that depend on page_view_indicator