Flutter PageView Page Indicators

flutter pageview indicator

builds indication marks for pageview in flutter.

import

import 'package:page_view_indicator/page_view_indicator.dart';

usage

default material behavior

return pageviewindicator(
  pageindexnotifier: pageindexnotifier,
  length: length,
  normalbuilder: (animationcontroller) => circle(
        size: 8.0,
        color: colors.black87,
      ),
  highlightedbuilder: (animationcontroller) => scaletransition(
        scale: curvedanimation(
          parent: animationcontroller,
          curve: curves.ease,
        ),
        child: circle(
          size: 12.0,
          color: colors.black45,
        ),
      ),
);

---

custom animations

return pageviewindicator(
  pageindexnotifier: pageindexnotifier,
  length: length,
  normalbuilder: (animationcontroller) => circle(
        size: 8.0,
        color: colors.black87,
      ),
  highlightedbuilder: (animationcontroller) => scaletransition(
        scale: curvedanimation(
          parent: animationcontroller,
          curve: curves.ease,
        ),
        child: circle(
          size: 8.0,
          color: colors.white,
        ),
      ),
);

---

custom icons

it’s not just about dots!

return pageviewindicator(
  pageindexnotifier: pageindexnotifier,
  length: length,
  normalbuilder: (animationcontroller) => scaletransition(
        scale: curvedanimation(
          parent: animationcontroller,
          curve: curves.ease,
        ),
        child: icon(
          icons.favorite,
          color: colors.black87,
        ),
      ),
  highlightedbuilder: (animationcontroller) => scaletransition(
        scale: curvedanimation(
          parent: animationcontroller,
          curve: curves.ease,
        ),
        child: icon(
          icons.star,
          color: colors.white,
        ),
      ),
);

---

changing the space between 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).

121

download the full project for this post from the following button

this source is fully free for all time

download as zip