leocavalcante / page_view_indicator

👆🏻 Builds indication marks for PageView.

PageViewIndicator

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

---

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

---

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

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)
  ...

Default is const EdgeInsets.all(8.0).

page_view_indicator's Issues

Page indicator length not updated if dynamically changed

Hi, basically same issue as this one - #1
If PageViewIndicator is inside StreamBuilder and item count is dynamically changed, the number of indicators stays the same. Here is a quick code to reproduce the issue:

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:page_view_indicator/page_view_indicator.dart';

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  final pageIndexNotifier = ValueNotifier<int>(0);
  int _counter = 2;
  StreamController<int> _events;

  @override
  void initState() {
    super.initState();
    _events = StreamController<int>();
    _events.add(_counter);
  }

  void _incrementCounter() {
    _counter++;
    _events.add(_counter);
  }

  void _decrementCounter() {
    if (_counter > 1) {
      _counter--;
      _events.add(_counter);
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: StreamBuilder<int>(
          stream: _events.stream,
          builder: (context, snapshot) {
            if (!snapshot.hasData) {
              return const SizedBox.shrink();
            }

            return Stack(
              alignment: FractionalOffset.bottomCenter,
              children: <Widget>[
                PageView.builder(
                  onPageChanged: (index) => pageIndexNotifier.value = index,
                  itemCount: snapshot.data,
                  itemBuilder: (context, index) {
                    return Container(
                      decoration: BoxDecoration(color: Colors.accents[index]),
                    );
                  },
                ),
                _buildExample1(snapshot.data),
                Center(
                  child: Text(snapshot.data.toString()),
                ),
              ],
            );
          },
        ),
        floatingActionButton: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisAlignment: MainAxisAlignment.end,
          children: <Widget>[
            FloatingActionButton(
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.exposure_plus_1),
            ),
            const SizedBox(height: 16),
            FloatingActionButton(
              onPressed: _decrementCounter,
              tooltip: 'Decrement',
              child: Icon(Icons.exposure_neg_1),
            ),
          ],
        ),
      ),
    );
  }

  PageViewIndicator _buildExample1(int length) {
    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.accents.elementAt(9),
        ),
      ),
    );
  }
}

void main() => runApp(App());

Widget length not updated

I'm using the PageViewIndicator inside a StreamBuilder.
The streamBuilder returns a List of object.
When object is added in the list and the StreamBuilder is triggered, the PageViewIndicator is NOT updated (number of dot stays the same).

If I try to insert a "basic" Text Widget, the Text is updated correctly with the number of objects in my list

Would you remove Listener when dispose?

widget.pageIndexNotifier.addListener in _addIndicatorsListener, so we need widget.pageIndexNotifier.removeListener in dispose or didUpdateWidget.

Null safety

Can we please migrate to null-safe?

There is no possibility to change item`s spacing

There is no possibility to change item`s spacing. You should make this editable.

Change Indicator Error

if I build widget currentPage: 1,then setpageIndexNotifier.value = 0,the indicator don't change.

because the initial value of _prevPage in _PageViewIndicatorState is 0.

maybe the initial value of _prevPage should be null.

How do you adjust padding or spaces between the dots?

Great work on this. How do you adjust padding or spaces between the dots? For instance, I might want the dots to be aligned much closer together. How can this be achieved? If possible, it will be helpful to include that somewhere in the README.md examples.

Is it possible to programatically jump to page?

HighlightedBuilder is called only once

I want to change the color of the highlight depending on the index but currently, highlightedBuilder is called only once. How to workaround that?

Navigate to the page by tapping on the dot

Thank you for the nice plugin, easy to use, works perfectly.
Have one issue though - didn't find a way to navigate PageView on certain page when user tap on the page's dot. It is quite standard behavior for such kind of navigation.
Will appreciate a help with how to get such behavior.

duplicate listener issue

Can I ask why _addIndicatorsListener is called in didUpdateWidget?
Currently everytime the widget tree gets rebuilt, duplicate listener is added to the list of widget.pageIndexNotifier listeners and it can sum up to infinite number of duplicate listeners.

page_view_indicator/lib/page_view_indicator.dart

Line 94 in 1876bb6

_addIndicatorsListener();

As the pageIndexNotifier is the same object every rebuild time, it's safe to add the listener only in initState.

Page Indicator overflowed, if we have many Pages

The issue is this, if I use the Page Indicator and set the length property to a large value, it overflowed from the screen which make the app look like it crashes.
The code is
PageViewIndicator(
pageIndexNotifier: _currentPageNotifier,
length: 20,
indicatorPadding: EdgeInsets.all(5.0),
normalBuilder: (animationController, index) => Circle(
size: 8.0,
color: Colors.black87,
),
highlightedBuilder: (animationController, index) => ScaleTransition(
scale: CurvedAnimation(
parent: animationController,
curve: Curves.ease,
),
child: Circle(
size: 20.0,
color: Colors.grey,
),
),
);