How to navigate to next page in a page indicator - flutter

Question

I have a function to swipe from screen to screen and show the progress in a indicator bar that I've created and a elevated button with the 'next page' option.
My question is how to navigate to the "next" page with an elevated button on the onTap function. Basically, same result than when the user swipes left.
This is what I've achieved so far:
class xxxx extends State<xxxx> {
final int _numPages = 3;
final PageController _pageController = PageController(initialPage: 0);
int _currentPage = 0;
List<Widget> _buildPageIndicator() {
var list = <Widget>[];
for (var i = 0; i < _numPages; i++) {
list.add(i == _currentPage ? _indicator(true) : _indicator(false));
}
return list;
}
Widget _indicator(bool isActive) {
return AnimatedContainer(
duration: Duration(milliseconds: 150),
margin: EdgeInsets.symmetric(horizontal: 8.0),
height: 8.0,
width: isActive ? 24.0 : 16.0,
decoration: BoxDecoration(
color: isActive ? TheBaseColors.lightRed : Colors.grey,
borderRadius: BorderRadius.all(Radius.circular(12)),
),
);
}
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
Color background = Color(0xFF001d5d);
return Scaffold(
[...................]
bottomSheet: _currentPage == _numPages - 1
? Container(
height: size.height * 0.10,
color: background,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(children: _buildPageIndicator()),
//CHANGE BUTTON
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: TheBaseColors.lightRed,
padding: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
onPressed: () {
pushNewScreen(
context,
screen: Routes.getWidgetForRoute(Routes.questions, context),
pageTransitionAnimation: PageTransitionAnimation.cupertino,
);
},
child: Text(
'Get started',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.normal,
),
),
),
],
),
)
: Container(
height: size.height * 0.10,
color: background,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(children: _buildPageIndicator()),
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: TheBaseColors.lightRed,
padding: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
),
onPressed: () {
pushNewScreen(
context,
screen: Routes.getWidgetForRoute(Routes.questions, context),
pageTransitionAnimation: PageTransitionAnimation.cupertino,
);
},
child: Text(
'Next',
style: TextStyle(
color: Colors.white,
fontSize: 20.0,
fontWeight: FontWeight.normal,
),
),
),
],
),
),
);
}
}

Answer 1

For that you can use these two functions i have created with the pagecontroller:
void nextPage(){
_pageController.animateToPage(_pageController.page.toInt() + 1,
duration: Duration(milliseconds: 400),
curve: Curves.easeIn
);
}
void previousPage(){
_pageController.animateToPage(_pageController.page.toInt() -1,
duration: Duration(milliseconds: 400),
curve: Curves.easeIn
);
}
you can change these according to you requirements.