Change the bottom navigation screen and its index on button press - flutter

Question

I am working on the bottom navigation bar feature. I have 4 screens associated with a bottom navigation bar.
Page1 Index0 (It has a button)
Page2 Index1
Page3 Index2
Page4 Index3
Each click on the bottom icon will change the index of a bottom navigation bar and triggers the specific screen to load.
Now I want to click on the button of screen 1 which is index 0 of a bottom navigation bar, this should make a call to load page2 as if I select the second icon of a bottom navigation bar.
I tried using the navigator.push(context,page()) which loaded the page however the bottom navigation bar was not visible. This is not the way, Is there any way to do it correctly?
Thanks

Answer 1

Use IndexedStack widget for this. Example is as follows:
class Home extends StatefulWidget {
const Home({Key? key}) : super(key: key);
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
int _currentIndex = 0; //Current selected index of the bottom navigation bar tab
void changeTab(int index) {
setState(() => _currentIndex = index);
}
#override
Widget build(BuildContext context) {
//List of Screens that you want to put
final screens = [
const Screen1(),
const Screen2(),
const Screen3(),
];
return Scaffold(
body: IndexedStack(
index: _currentIndex,
children: screens,
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (index) => changeTab(index),
type: BottomNavigationBarType.fixed,
unselectedItemColor: Colors.grey,
selectedItemColor: Colors.red,
showUnselectedLabels: false,
showSelectedLabels: false,
iconSize: 20,
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.foo),
label: 'Screen1',
),
BottomNavigationBarItem(
icon: Icon(Icons.bar),
label: 'Screen2',
),
BottomNavigationBarItem(
icon: Icon(Icons.baz),
label: 'Screen3',
),
],
),
);
}
}

Answer 2

I fixed this issue using a Provider. The issue has been resolved now.

Answer 3

I've read your question and that's what I found out:
You want to change the bottom navigation bar pages by clicking on a button.
To do so, simply change the index variable that you are passing to the selected index of the bottom navigation to the index of the page you want, and you will need to make it inside a setState function so the variable get updated.
Like the code below:
onTap: () {
setState((() => this.index = 0));
},

Answer 4

You can change bottom navigation bar index from every screen
static int bottomNavigationTabIndex = 0;
static void selectPage(BuildContext context,int index) {
BottomNavigationScreenState? stateObject = context.findAncestorStateOfType<BottomNavigationScreenState>();
stateObject?.setState((){
bottomNavigationTabIndex = index;
});
}