TextButton widget requires double tab to go on next page-CodePudding

I'm using a PageView widget and there are lots of children's inside the pageview widget and for navigating between the pages, I'm using a PageController (jump to page) but for some unknown reason, the TextButton requires double to go on the next page and vice versa for the previous page

Could you please tell me what I'm doing wrong?

class _DemoState extends State<Demo> {

  int argsNumber = 8;

  final PageController controller = PageController(initialPage: 0);

  int pageChanged = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: PageView(
          controller: controller,
          onPageChanged: (value){
             setState(() {
               pageChanged = value;
             });
          },
          children: [
            Container( // Children One
              child: Column(
                children: [
                  Expanded(child: Text('text'.tr(), style: TextStyle(fontSize: 25.0, height: 1.6, fontWeight: FontWeight.bold, color: Colors.white, fontFamily: 'oswald'), textAlign: TextAlign.center)),
                  Row(
                    children: [
                      TextButton(
                          onPressed: (){
                            controller.jumpToPage(pageChanged  ); // To go on the next page but requires double tap
                          },
                          child: Icon(Icons.arrow_forward, color: Colors.white,)
                      ),
                      TextButton(
                          onPressed: (){
                            controller.jumpToPage(pageChanged--);
                          },
                          child: Icon(Icons.arrow_back, color: Colors.white,)
                      ),
                    ],
                  ),
                ],
              ),
            ),
            for(int i = 0; i < arguments.length; i  = argsNumber ) // Children Two (loop)
              Lyrics(arguments[i].tr(), arguments[i   1].tr(), arguments[i   2].tr(), arguments[i   3].tr(), arguments[i   4].tr(), arguments[i   5].tr(), arguments[i   6].tr(), arguments[i   7].tr(), controller, pageChanged),
            Container( // Children Three
              child: Column(
                children: [
                  Text('text'.tr(), style: TextStyle(fontSize: 25.0, height: 1.6, fontWeight: FontWeight.bold, color: Colors.white, fontFamily: 'oswald'), textAlign: TextAlign.center,),
                  Row(
                    children: [
                      TextButton(
                          onPressed: (){
                            controller.jumpToPage(pageChanged  ); // To go on the next page but requires double tap
                          },
                          child: Icon(Icons.arrow_forward, color: Colors.white,)
                      ),
                      TextButton(
                          onPressed: (){
                            controller.jumpToPage(pageChanged--);
                          },
                          child: Icon(Icons.arrow_back, color: Colors.white,)
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

Try increasing number like this:

            TextButton(
                          onPressed: (){
                            pageChanged = pageChanged   1;
                            controller.jumpToPage(pageChanged);
                          },
                          child: Icon(Icons.arrow_forward, color: Colors.white,)
                      ),
                      TextButton(
                          onPressed: (){
                            pageChanged = pageChanged - 1;
                            controller.jumpToPage(pageChanged);
                          },
                          child: Icon(Icons.arrow_back, color: Colors.white,)
                      )

CodePudding user response：

I advise you to use Gesture Detector instead of TextBotton and recreate a button in the child of the Container.

In this way you can also use the doubleTap property, the one you are looking for.

GestureDetector(
    onDoubleTap: _handleDoubleTap,
    child: Container(
       ... 
     ),
);

ref:
GestureDetector