Horizontal page swap with button click and scroll – Flutter

Issue

I am trying to swap screens on horizantally by using both buttons and scroll. I am trying to acheive something like this. I hope you get the idea of what I am trying to do.

Below is my code to acheive this

class ChefProfile extends StatefulWidget {
  @override
  _ChefProfileState createState() => _ChefProfileState();
}

class _ChefProfileState extends State<ChefProfile> {
 
 int pageViewIndex;
  PageController _pgController = PageController(initialPage: 0, keepPage: true);
  List pageContent = [ChefDishes(), ChefInfo()];


  @override
  Widget build(BuildContext context) {
.
. // Some code (Irrelevant to question)
.
 Container(
                     
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,

                          InkResponse(
                            onTap: () => setState(() {
                              pageViewIndex = 0;
                            }),
// --- DISH BUTTON                   
                            child: Container(
                              ...
                              child: Text(
                                  "Dishes",
                                  style: TextStyle(
                                   ...
                                ),
                              ),
                            ),
                          ),

                          Spacer(),
// --- INFO BUTTON           
                          InkResponse(
                            onTap: () => setState(() {
                              pageViewIndex = 1;
                            }),

                            child: Container(
                             ...
                                child: Text(
                                  "Info",
                                  style: TextStyle(
                                   ...
                              ),
                             ),
                            ),
                          ),
                        ],
                      ),
                    ),

                    Container(
                       ...
                      child: PageView.builder(
                        controller: _pgController,
                        itemCount: pageContent.length,
                        itemBuilder: (context, pageViewIndex) {

                          return pageContent[pageViewIndex];
                        },
                      ),
                    ),

I am saving screen index using "pageScreenIndex" and changing it’s value on either of button click. I am new to flutter.
My screen looks something like this now. It channge the screen on swap but not on button click

Solution

You can achieve it using animateToPage.

  InkResponse(
                            onTap: () => {
                              pageViewIndex = 0;
                              controller.animateToPage(pageViewIndex,
                                                       duration: Duration(milliseconds: 100),
                                                       curve: Curves.easeIn,
                                                     ); 
                            },
// --- DISH BUTTON                   
                            child: Container(
                              ...
                              child: Text(
                                  "Dishes",
                                  style: TextStyle(
                                   ...
                                ),
                              ),
                            ),
                          ),

Answered By – Pushpendra

Answer Checked By – Mildred Charles (FlutterFixes Admin)