To me it makes sense that both 'dotCount' and 'position' should be int ('dotCount' is the number of dots, and 'position' is the index of the current dot). Why is 'position' a double? What does it mean for position to be 1.5?

Added two new properties: colors and activeColors. Both properties are lists. If unset, defaults to the original color. I modified this because it was something I needed. If you think this isn't right for the main repo, no problem!

Hey Thanks for the awesome package. This made my job very easy. However the direction property is missing. I would like to use a vertical indicator rather horizontal. Do you have plans to upgrade the plugin anytime soon?

The library 'package:dots_indicator/dots_indicator.dart' is legacy, and should not be imported into a null safe library.
Try migrating the imported library.

Error: This project cannot run with sound null safety, because one or more project dependencies do not
support null safety:

- dots_indicator

dependencies:
  dots_indicator: ^1.2.0

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

Good morning everyone. I want to manage that the points are dynamic that the activated and the not activated, are long according to the number of pages it has, is it possible? I attach a picture

https://ibb.co/wM7Nysv

Hi there ! Just wondering if there is functionality to change the color of the inactive dots. I did not see it explicitly and it's very possible I overlooked something!

The plugin is working perfectly for the mobile app (Android / iOS)

When I try to use this plugin with flutter web it works fine except when I try to resize the window. When I resize the window, more points are added to the dots indicator and an overflow appear on the right.

Error:

The relevant error-causing widget was: Row org-dartlang-app:///packages/dots_indicator/src/dots_indicator.dart:61:11 The overflowing RenderFlex has an orientation of Axis.horizontal. The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size. This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

I have a Pageview widget setup along with dots indicator. When the page changes the "position" of the dot also changes. So the dot transition happens immediately even before the page transition completes. A "delay" property would be great to keep both dot and the page transitions in sync.

Hi,

I noticed that ColorLoader is not well centered. Reason is that only the right padding is added in the _ColorLoaderState build function, so dots are shifted left as a result. It can be fixed if padding for dots is set in following order:

padding: const EdgeInsets.only(left: 4.0, right: 8.0)
padding: const EdgeInsets.only(right: 8.0)
padding: const EdgeInsets.only(right: 4.0)

I guess since it is a small fix I post it here..but if you want I can send a pull request too.

Cheers, Milos

dots_indicator 2.0.0 When there are too many page numbers.

log:

The following assertion was thrown during layout:
A RenderFlex overflowed by 144 pixels on the right.

Hi,

I am getting error as: 'package:dots_indicator/src/dots_indicator.dart': Failed assertion: line 31 pos 16: 'dotsCount != null && dotsCount > 0': is not true.

In init state part I am getting a data from remote server. Once the data verify I set the loadIndicator true so I can show the page. in area that data verify before setting the page loadIndicator to true in setState I set the pageLength. pageLength is integer and it totals of list of the data that I get from database. Everything works. Even I set the dotsCount = pageLength;

Any idea why I am keep getting this error?

My code:

return Scaffold(
    body: new Form(
      key: _formKey,
      child: Stack(
        children: [
          Column(
            children: [
              // IMAGE AREA TOP
              Container(
                height: 230.0,
                width: MediaQuery.of(context).size.width - 50.0,
                child: PageView.builder(
                  scrollDirection: Axis.horizontal,
                  controller: _pageController,
                  onPageChanged: ((_page) {
                    setState(() {
                      int _currentValue = int.parse('$_page');
                      currentIndexPage = _currentValue;
                    });
                  }),
                  itemCount: pageLength,
                  itemBuilder: (context, index) => _creditCard(context, currentIndexPage),
                ),
              ),
              // DOTS INDICTOR AREA
              Padding(
                padding: const EdgeInsets.only(top: 16.0),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    DotsIndicator(
                      dotsCount: pageLength,
                      position: double.parse('$currentIndexPage'),
                      decorator: DotsDecorator(
                        color: Colors.black38,
                        activeColor: Colors.red,
                        size: const Size.square(9.0),
                        activeSize: const Size(18.0, 9.0),
                        activeShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
                      ),
                    )
                  ],
                ),
              ),

flutter doctor -v:

[✓] Flutter (Channel stable, 1.22.6, on macOS 11.2.2 20D80 darwin-x64, locale en-GB)
    • Flutter version 1.22.6 at /Users/*********/flutter
    • Framework revision 9b2d32b605 (6 weeks ago), 2021-01-22 14:36:39 -0800
    • Engine revision 2f0af37152
    • Dart version 2.10.5

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/*********/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • ANDROID_HOME = /Users/*********/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.4, Build version 12D4e
    • CocoaPods version 1.10.1

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin installed
    • Dart plugin version 201.9335
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] IntelliJ IDEA Community Edition (version 2020.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin installed
    • Dart plugin version 203.6912

[✓] Connected device (1 available)
    • iPhone 11 (mobile) • 92E3**************************************E72 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-4 (simulator)