How to jump to another page with pageview flutter - flutter

Question

Hello I tried to jump to my second page tab if I press on a button on my first Page tab. Currently I know only call route of my seconde page widget but bottomnavbar isn't present... I don't know how to call my parent widget from my first page tab to jump to the seconde page tab.
class Parent {
int bottomSelectedIndex = 0;
List<BottomNavigationBarItem> buildBottomNavBarItems() {
return [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('First')
),
BottomNavigationBarItem(
icon: new Icon(Icons.search),
title: new Text('Second'),
),
];
}
PageController pageController = PageController(
initialPage: 0,
keepPage: true,
);
Widget buildPageView() {
return PageView(
controller: pageController,
onPageChanged: (index) {
pageChanged(index);
},
children: <Widget>[
First(),
Second(),
],
);
}
#override
void initState() {
super.initState();
}
void pageChanged(int index) {
setState(() {
bottomSelectedIndex = index;
});
}
void bottomTapped(int index) {
setState(() {
bottomSelectedIndex = index;
pageController.animateToPage(index, duration: Duration(milliseconds: 500), curve: Curves.ease);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: buildPageView(),
bottomNavigationBar: BottomNavigationBar(
currentIndex: bottomSelectedIndex,
onTap: (index) {
bottomTapped(index);
},
items: buildBottomNavBarItems(),
),
);
}
}
class first {
return Container(
// here a pressbutton for jump to the second widget
);
}
----------------------------------------------------------
class second
return Container(
);
}

Answer 1

You can use this:
void onAddButtonTapped(int index) {
// use this to animate to the page
pageController.animateToPage(index);
// or this to jump to it without animating
pageController.jumpToPage(index);
}
Pass the function as params:
class first {
final void Function(int) onAddButtonTapped;
return Container(
// call it here onAddButtonTapped(2);
);
}
class Second {
final void Function(int) onAddButtonTapped;
return Container(
);
}
children: <Widget>[
First(onAddButtonTapped),
Second(onAddButtonTapped),
],

Answer 2

You can pass a callback to your first widget and call that when the button is pressed, so you can change the page in the parent widget.
Something like this:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Test',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Parent(),
);
}
}
class Parent extends StatefulWidget {
#override
_ParentState createState() => _ParentState();
}
class _ParentState extends State<Parent> {
int bottomSelectedIndex = 0;
List<BottomNavigationBarItem> buildBottomNavBarItems() {
return [
BottomNavigationBarItem(
icon: new Icon(Icons.home), title: new Text('First')),
BottomNavigationBarItem(
icon: new Icon(Icons.search),
title: new Text('Second'),
),
];
}
PageController pageController = PageController(
initialPage: 0,
keepPage: true,
);
Widget buildPageView() {
return PageView(
controller: pageController,
onPageChanged: (index) {
pageChanged(index);
},
children: <Widget>[
FirstWidget(
onButtonPressed: () => pageController.animateToPage(
1,
duration: Duration(milliseconds: 300),
curve: Curves.linear,
),
),
SecondWidget(),
],
);
}
#override
void initState() {
super.initState();
}
void pageChanged(int index) {
setState(() {
bottomSelectedIndex = index;
});
}
void bottomTapped(int index) {
setState(() {
bottomSelectedIndex = index;
pageController.animateToPage(index,
duration: Duration(milliseconds: 500), curve: Curves.ease);
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test'),
),
body: buildPageView(),
bottomNavigationBar: BottomNavigationBar(
currentIndex: bottomSelectedIndex,
onTap: (index) {
bottomTapped(index);
},
items: buildBottomNavBarItems(),
),
);
}
}
class FirstWidget extends StatefulWidget {
final VoidCallback onButtonPressed;
FirstWidget({#required this.onButtonPressed});
#override
_FirstWidgetState createState() => _FirstWidgetState();
}
class _FirstWidgetState extends State<FirstWidget> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
child: Center(
child: FlatButton(
onPressed: widget.onButtonPressed,
child: Text('Go to second page'),
),
),
);
}
}
class SecondWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(color: Colors.green);
}
}