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?
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?
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.
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()),
],
),
)
have you tried using PageViewController's jumpToPage?
https://api.flutter.dev/flutter/widgets/PageController/jumpToPage.html
You can have a PageViewController on the parent of the PageView so you can pass it on each page.