Maintain Bottom Navbar on every screen in flutter

Question

This is the code of my navbar. I can't seem to have it stick to all the sceens when a user navigates to a new page. After moving to a new page and user performs function, the user has to return to the home screen but when user returns to home screen the bottom navbar is lost. this happens to the other options on navbar (even though from the code they all seem to be connected to one page i.e. the homepage).

class Navbar extends StatefulWidget {
const Navbar({Key? key}) : super(key: key);
@override
State<Navbar> createState() => _NavbarState();
}

class _NavbarState extends State<Navbar> {
int index = 0;
final screens = [
const Homepage(),
const Homepage(),
const Homepage(),
const Homepage(),
const LoanApplication(),

 ];
@override
Widget build(BuildContext context) {
return Scaffold(
  body: screens[index],
  bottomNavigationBar: BottomNavigationBar(
 type: BottomNavigationBarType.fixed, // Fixed 
 backgroundColor: Colors.white, // <-- This works for fixed
 selectedItemColor: const Color.fromARGB(249, 40, 68, 194),
 unselectedItemColor: Colors.black54,
 currentIndex: index,
 iconSize: 24,
 unselectedLabelStyle: GoogleFonts.poppins(
                  textStyle: const TextStyle(
                      color: Colors.black54,
                      fontSize: 12.0,
                      fontWeight: FontWeight.w500),
                ),
 selectedLabelStyle: GoogleFonts.poppins(
                  textStyle: const TextStyle(
                      color: Colors.black54,
                      fontSize: 12.0,
                      fontWeight: FontWeight.w600),
                ),
 onTap: (index) => setState(() => this.index = index),
 items: const [
 BottomNavigationBarItem(
  icon: Icon(PhosphorIcons.house),
  label: 'Home',
  activeIcon: Icon(PhosphorIcons.house_fill),
),
BottomNavigationBarItem(
  icon: Icon(PhosphorIcons.wallet),
  label: 'Vault',
  activeIcon: Icon(PhosphorIcons.wallet_fill),
),
BottomNavigationBarItem(
  icon: Icon(PhosphorIcons.credit_card),
  label: 'DigiSafe',
  activeIcon: Icon(PhosphorIcons.credit_card_fill),
),
BottomNavigationBarItem(
  icon: Icon(PhosphorIcons.activity),
  label: 'Spendings',
  activeIcon: Icon(PhosphorIcons.activity_fill),
),
BottomNavigationBarItem(
  icon: Icon(Icons.contacts),
  label: 'Profile',
  activeIcon: Icon(Icons.contacts)
  ), 
 ],
  )
  );
 }
 }

Answer 1

i solved it. I used the persistent_bottom_nav_bar package which has some custom navigations to help with maintaining the navbar on some pages. check it ou here https://pub.dev/packages/persistent_bottom_nav_bar