πŸ‘†πŸ» Builds indication marks for PageView.
Switch branches/tags
Nothing to show
Clone or download
Latest commit cae18ec Jul 31, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Refactor to properly get page changes notifications Jul 27, 2018
lib Dispose animation controllers Jul 31, 2018
.editorconfig Add EditorConfig file Jul 21, 2018
.gitignore Initial commit Jul 21, 2018
LICENSE Initial commit Jul 21, 2018
README.md Update README examples Jul 27, 2018
example1.gif Finish 🏁 Jul 21, 2018
example2.gif Finish 🏁 Jul 21, 2018
example3.gif Finish 🏁 Jul 21, 2018
pubspec.yaml Bump version tag Jul 31, 2018

README.md

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

Example 1


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

Example 2


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

Example 3