CODEWITHSUNDEEP
flutterviewpagerindicatorpageviews
Alok
Alok

Reputation: 8998

CurrentIndex is not updated in the Dots_Indicator PageView in flutter

I have been working on the PageView, and my page view is working fine. But there is one since I have used dots_indicator 0.0.4 for it to represent on which I'm in right now. I'm getting confused about whether how to do that. My indicator is showing up fine but the problem is in how to update the index in the position element to update the active dots.

I have tried every possible way to update it but, it is confusing me out. What I want are :

Since I have tried both of them like creating a variable named index and trying to update it's value when we hit the button. But it didn't update the value.

I don't know how we suppose to change the value when we scroll the page.

I have a changePage() when we hit the button to go to the next page, but the index value wasn't updating in the DotsIndicator().

CODE:

class OnboardingPage extends StatelessWidget {
    final PageController controller = new PageController();
    var index = 0;

    final List<OnboardingPageItem> pages = [
       //I do have a onboarding page widget which is coming up fine
       //so this is not our concern
    ];

    PageView getPages(){
      return PageView(
        controller: this.controller,
        children: this.pages
      );
    }

    //this is a method which controls the button hit for changing the page
    changePage(BuildContext context) {
      //tried here to update the value of the index by assigning the value to it
      //index = this.controller.page.toInt()
      if (this.controller.page >= this.pages.length - 1) {
        Navigator.pushNamed(context, '/signin');
      }
      this.controller.nextPage(duration: Duration(milliseconds: 200), curve: Curves.easeIn);
    }

    @override
    Widget build(BuildContext context) {
      return Material(
       child: Stack(children: <Widget>[
         Positioned(
           left: 24, right: 24, top: 0, bottom: 80, child: this.getPages()),
         Positioned(
           child: DotsIndicator(
             numberOfDot: 3,
             position: this.index,
             dotColor: Theme.of(context).primaryColor.withOpacity(0.5),
             dotActiveSize: new Size(12.0, 12.0),
             dotActiveColor: Theme.of(context).primaryColor
           ),
           bottom: 100.0,
           left: 150.0,
           right: 150.0
         ),
         Positioned(
          child: TMButton(
            text: "Next",
            onPressed: () {changePage(context);},
          ),
          bottom: 24,
          left: 24,
          right: 24
         )
     ]));
   }
}

EDITS

I have tried using this.controller.hasClients to update when it changes to true, but nothing works out for me. Seems like it is a static param of DotsIndicator.

position: this.controller.hasClients ? this.controller.page.toInt() : this.controller.initialPage;

The currentIndex remains to the initial page, and doesn't change at all.

Any help would be appreciated. Thanks :)

Upvotes: 0

Views: 2679

Answers (1)

Herbert Poul
Herbert Poul

Reputation: 4883

as soon as you have a modifyable state (index) in your widget, you must not use StatelessWidget, but create StatefulWidget with a corresponding State. And when modifying index wrap it in setState(() { index = ... ; }); this assures that your build method will be recalled when the state changes.

There is no hidden magic which would monitor your state. Your Widget will only rebuild if you call setState of a StatefulWidget.

Upvotes: 2

Related Questions