douglasiacovelli / page_view_dot_indicator

A simple and animated page view indicator in the form of dots, which you can customise color, size, space and duration.

Page view dot indicator

This lib draws a simple dot indicator for page views with a simple API. Right now it is able to draw dots with custom size, colors, spacing and duration. Besides that it also handles overflow by fading the edges if there are more dots than the width of the page allows.

Usage

Simply use this Widget in your page and make sure to use any form of state management to update the currentItem, such as setState.

These are the mandatory parameters:

PageViewDotIndicator(
  currentItem: selectedPage,
  count: pageCount,
  unselectedColor: Colors.black26,
  selectedColor: Colors.blue,
)

But you can also customize it using other parameters, such as:

PageViewDotIndicator(
  currentItem: selectedPage,
  count: pageCount,
  unselectedColor: Colors.black26,
  selectedColor: Colors.blue,
  size: const Size(12, 12),
  unselectedSize: const Size(8, 8),
  duration: const Duration(milliseconds: 200),
  margin: const EdgeInsets.symmetric(horizontal: 8),
  padding: EdgeInsets.zero,
  alignment: Alignment.centerLeft,
  fadeEdges: false,
  boxShape: BoxShape.square, //defaults to circle
  borderRadius: BorderRadius.circular(5), //only for rectangle shape
  onItemClicked: (index) { ... }
)

page_view_dot_indicator's Issues

Seeing flutter error thrown

Hi, we have been using the library for a while now and has been great. We have been seeing some crashes come back in our crash reporting however. Guessing it is unmounted or hasn't added the scroll controller into the scrollView yet.

Non-fatal Exception: FlutterError
0 ??? 0x0 growable_array.Bad_state_No_element:_ + 353 (growable_array.dart:353)
1 ??? 0x0 _GrowableList.single (dart:core)
2 ??? 0x0 ScrollController.position + 109 (scroll_controller.dart:109)
3 ??? 0x0 _PageViewDotIndicatorState._getOffsetForCurrentPosition + 164 (indicator.dart:164)
4 ??? 0x0 _PageViewDotIndicatorState.scrollToCurrentPosition + 101 (indicator.dart:101)
5 ??? 0x0 _PageViewDotIndicatorState.initState. + 89 (indicator.dart:89)
6 ??? 0x0 SchedulerBinding._invokeFrameCallback + 1146 (binding.dart:1146)
7 ??? 0x0 SchedulerBinding.handleDrawFrame + 1091 (binding.dart:1091)
8 ??? 0x0 SchedulerBinding._handleDrawFrame + 997 (binding.dart:997)

Clickable dot indicators

Null check operator used on a null value (_maxScrollExtent is null)

Hi, I'm facing a weird issue. I create a PageViewDotIndocator with currentPage = 0 and length = 12. I get the following stacktrace (see below).
The corresponding code in the PageViewDotIndocator code is:

double get maxScrollExtent => _maxScrollExtent!;

I did a quick investigation but didn't find any clue. Any idea? My enclosing layout probably causes it, but this Null check error should probably not happen...

Null check operator used on a null value

When the exception was thrown, this was the stack: 
#0      ScrollPosition.maxScrollExtent (package:flutter/src/widgets/scroll_position.dart:145:49)
#1      _PageViewDotIndicatorState._getOffsetForCurrentPosition (package:page_view_dot_indicator/src/indicator.dart:172:36)
#2      _PageViewDotIndicatorState.scrollToCurrentPosition (package:page_view_dot_indicator/src/indicator.dart:109:26)
#3      _PageViewDotIndicatorState.didUpdateWidget (package:page_view_dot_indicator/src/indicator.dart:103:7)
#4      StatefulElement.update (package:flutter/src/widgets/framework.dart:5142:55)
#5      Element.updateChild (package:flutter/src/widgets/framework.dart:3660:15)
#6      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4993:16)

Add support for Flutter 3

Current version generates warnings when getting compiled with Flutter 3.

Don't use MediaQuery

Hi, this widget has a screen-wide width.

It's incorrect, I cannot wrap the PageViewDotIndicator into Container because of it

Wanted result:

Actual result:

You probably should use shrink-wrap / IntrinsicWidth, to set an actual content size, instead of a MediaQuery size.