TextButton widget requires double tab to go on next page

Issue

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

Solution

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

Answered By – Aplamis

Answer Checked By – David Marino (FlutterFixes Volunteer)