How to push on new screens with bottom navigation bar ? I have to show that bottom navigation bar and also manage navigation

Question

I am facing issue regarding bottom navigation bar.Example if suppose i have 3 bottom navigation bar item and its A,B and C.If i click on the C and C is the settings screen and on settings screen i also push on another screen.In this scenario the bottom navigation bar is showing but when after click in the setting screen in user details option and then click on the A or B Tab that time tab is coming but it is behind user details screen.So how to managed this scenario?

Answer 1

In your screen define this

List<Widget> pageList = [
    const HomeScreen(),
    const ContactScreen(),
    const SettingScreen(),
  ];

In body use it like this

return Scaffold(
          bottomNavigationBar:  BottomNavigationBar(
      backgroundColor: Colors.white,
      type: BottomNavigationBarType.fixed,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
           icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.contact),
          label: 'Contact',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.settings)
          label: 'Settings',
        ),
      ],
      currentIndex: tabSelectedIndex.value,
      selectedItemColor: colorPrimary,
      unselectedItemColor: colorGrey,
      onTap: (index) => setState(() {
      _selectedIndex = index;
      }),
        body:pageList.elementAt(_selectedIndex)
        );