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

January 3, 2023

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 🙂

>Solution :

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,
  ),
);
}