TextButton widget requires double tab to go on next page

Question

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

Answer 1

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

Answer 2

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