Flutter: How to navigate in PageView with a RaisedButton or move pageViewController with button

Question

I want to create a section of Page View in which we can navigate between its children Pages on pressing a unique raised button.

Each button will navigate to different page.

How can I achieve this?

Solution 1

You have to have this controller:

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

After this you can define your PageView widget. Now the raised button can have this for controlling the

                        onPressed: () {
                          if (_pageController.hasClients) {
                            _pageController.animateToPage(
                              1,
                              duration: const Duration(milliseconds: 400),
                              curve: Curves.easeInOut,
                            );
                          }
                        }, 

You have to note the index of the page.

Solution 2

This Code you can use for your requirement,

I have written in such a way that it will replicate Tabbar

first it's button bar like tabs:

Container(
  width: MediaQuery.of(context).size.width * 0.9,
  height: MediaQuery.of(context).size.height * 0.1,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      RaisedButton(
        onTap: () {
          setState(() {
            select1 = true;
          });
          pageController.animateToPage(0,
              duration: Duration(milliseconds: 500),
              curve: Curves.bounceOut
          );
        },
        child: Container(
            width: MediaQuery.of(context).size.width * 0.29,
            height: MediaQuery.of(context).size.height * 0.04,
            color: colorWhite,
            child: Text("First"),
        ),
      ),
      RaisedButton(
        onTap: () {
          setState(() {
            select2 = true;
          });
          pageController.animateToPage(1,
            duration: Duration(milliseconds: 500),
            curve: Curves.bounceOut
          );
        },
        child: Container(
            width: MediaQuery.of(context).size.width * 0.29,
            height: MediaQuery.of(context).size.height * 0.04,
            color: colorWhite,
            child: Text("Second")
        ),
      ),
      RaisedButton(
        onTap: () {
          setState(() {
            select3 = true;
          });
          pageController.animateToPage(2,
            duration: Duration(milliseconds: 500),
            curve: Curves.bounceOut
          );
        },
        child: Container(
            width: MediaQuery.of(context).size.width * 0.29,
            height: MediaQuery.of(context).size.height * 0.04,
            color: colorWhite,
            child: Text("Third")
        ),
      ),
    ]
  )
),

and this is arrays of Pages:

Container(
  height: MediaQuery.of(context).size.height * 0.8,
  child: PageView(
    controller: pageController,
    onPageChanged: (index) {
      setState(() {
        pageChanged = index;
        if(pageChanged == 0)
          select1 = true;
        else if(pageChanged == 1)
          select2 = true;
        else if(pageChanged == 2)
          select3 = true;
      });
      print("Page Changed is: $pageChanged");
    },
    children: <Widget>[
      Container(child: FirstPage()),
      Container(child: SecondPage()),
      Container(child: ThirdPage()),
    ],
  ),
)