时间戳

首页 > 解决方案 > CurrentIndex is not updated in the Dots_Indicator PageView in flutter

flutter - 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 :)

标签： flutterviewpagerindicatorpageviews

解决方案

一旦你的小部件中有一个可修改的状态( index)，你就不能使用StatelessWidget，而是StatefulWidget使用相应的State. 并且在修改indexwrap 它时，可以setState(() { index = ... ; });确保build在状态更改时调用您的方法。

没有隐藏的魔法可以监控你的状态。只有当您调用setState.StatefulWidget

推荐阅读