Why isn't the bottom navigation bar moving between screens in Flutter? - flutter

Question

I have been trying to figure out the reason why the screens won't switch easily. It doesn't seem like they are switching to other views such as Profile.
I got the tutorial from here: https://blog.logrocket.com/how-to-build-a-bottom-navigation-bar-in-flutter/
class TabNav extends StatefulWidget {
const TabNav({Key? key}) : super(key: key);
#override
State<TabNav> createState() => _TabNavState();
}
class _TabNavState extends State<TabNav> {
#override
Widget build(BuildContext context) {
int _selectedIndex = 0;
const List<Widget> _pages = <Widget>[
HomeTab(),
RoomsTab(),
SearchTab(),
MapsTab(),
ProfileTab()
];
// This will give the index of the page when a nav icon is tapped
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
return Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: _pages,
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.transparent,
onTap: _onItemTapped,
type: BottomNavigationBarType.shifting,
iconSize: 30,
unselectedItemColor: Colors.black,
// backgroundColor: Color.fromRGBO(75, 0, 130, 0.5),
selectedIconTheme: IconThemeData(color: Colors.black, size: 30),
selectedItemColor: Colors.black,
selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.door_back_door),
label: 'Rooms',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.map),
label: 'Maps',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
),
);
}
}
I am not sure why this is occurring because everything seems all right. But I can't navigate anywhere else besides the home screen. I'd appreciate any sort of help :)

Answer 1

Because you declared your functions and variables inside the build method. The build method runs every time you call setState and this means you will declare _selectedIndex every time with 0 again. So if you put it inside your class it won't reset to 0 again:
int _selectedIndex = 0;
const List<Widget> _pages = <Widget>[
HomeTab(),
RoomsTab(),
SearchTab(),
MapsTab(),
ProfileTab()
];
// This will give the index of the page when a nav icon is tapped
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: IndexedStack(
index: _selectedIndex,
children: _pages,
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.transparent,
onTap: _onItemTapped,
type: BottomNavigationBarType.shifting,
iconSize: 30,
unselectedItemColor: Colors.black,
// backgroundColor: Color.fromRGBO(75, 0, 130, 0.5),
selectedIconTheme: IconThemeData(color: Colors.black, size: 30),
selectedItemColor: Colors.black,
selectedLabelStyle: TextStyle(fontWeight: FontWeight.bold),
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.door_back_door),
label: 'Rooms',
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: 'Search',
),
BottomNavigationBarItem(
icon: Icon(Icons.map),
label: 'Maps',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
),
);
}