page_view_indicator_ns

Description:

page view indicator ns

PageViewIndicator #
Builds indication marks for PageView.
Null Safety #
This is a fork of the https://pub.dev/packages/page_view_indicator. The only change is that this package uses Null Safety
Import #
import 'package:page_view_indicator/page_view_indicator.dart';
copied to clipboard
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,
),
),
);
copied to clipboard


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,
),
),
);
copied to clipboard


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,
),
),
);
copied to clipboard

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)
...
copied to clipboard
Default is const EdgeInsets.all(8.0).