Pyozer / dots_indicator

Add an indicator for a progression. You can customize indicators (shape, color, ..)
https://pub.dartlang.org/packages/dots_indicator
MIT License
153 stars 36 forks source link

PageView / PageController integration #21

Closed abe-winter closed 2 years ago

abe-winter commented 2 years ago

Hi! Great library, thanks for writing it.

I wrote a wrapper to integrate these indicators with flutter's built-in PageController. I'm posting it here in case it's a useful addition. Feel free to assign me a PR if this should be integrated with DotsIndicator, or close this ticket if it's out of scope.

What this does:

  1. registers itself with PageController.addListener so it receives updates
  2. connects DotsIndicator.onTap to the PageController so taps update the PageView position
class ListenerDots extends StatefulWidget {
  final PageController pos;
  final int dotsCount;
  const ListenerDots({Key? key, required this.pos, required this.dotsCount})
      : super(key: key);

  @override
  State<StatefulWidget> createState() => _ListenerDotsState();
}

class _ListenerDotsState extends State<ListenerDots> {
  double lastPos = 0;

  @override
  void initState() {
    widget.pos.addListener(updatePage);
    super.initState();
  }

  /// listen handler
  updatePage() => setState(() {
        lastPos = widget.pos.page ?? 0.0;
      });

  @override
  void dispose() {
    widget.pos.removeListener(updatePage);
    super.dispose();
  }

  onTap(double offset) {
    widget.pos.animateToPage(
      offset.toInt(),
      duration: const Duration(milliseconds: 200),
      curve: Curves.easeInOut,
    );
  }

  @override
  Widget build(BuildContext context) => DotsIndicator(
      dotsCount: widget.dotsCount, position: lastPos, onTap: onTap);
}
Pyozer commented 2 years ago

Hi, sorry for no reply :/ Great idea, I'm afraid that this adding too much complexity on the package, I will think about it for next release. I close this issue, thank you for idea.