How to make a Persistent BottomAppBar?

Question

I made a BottomAppbar and a FAB at the center of a screen. The BottomAppbar is working fine, moving by indexes but now I want to make it persistent across all screens whenever I navigate.

Here is the current code:

class BottomNavBar extends StatefulWidget {
  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int currentTab = 0;
  final List<Widget> screens = [
    MenuPage(),
    OffersPage(),
    ProfilePage(),
    MorePage(),
    HomePage(),
  ];
  final PageStorageBucket buckets = PageStorageBucket();
  Widget currentScreen = HomePage();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        notchMargin: 20,
        child: SizedBox(
          height: 80,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  MaterialButton(
                    minWidth: 40,
                    onPressed: () {
                      setState(() {
                        currentScreen = MenuPage();
                        currentTab = 4;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/images/menu.png',
                          color: currentTab == 4
                              ? kPrimaryColor
                              : Colors.grey.withOpacity(0.5),
                        ),
                        SizedBox(height: 0.2 * kDefaultPadding),
                        Text(
                          'Menu',
                          style: Theme.of(context).textTheme.caption!.copyWith(
                                color: currentTab == 4
                                    ? kPrimaryColor
                                    : Colors.grey.withOpacity(0.5),
                              ),
                        ),
                      ],
                    ),
                  ),
                  MaterialButton(
                    minWidth: 40,
                    onPressed: () {
                      setState(() {
                        currentScreen = OffersPage();
                        currentTab = 1;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/images/offers.png',
                          color: currentTab == 1
                              ? kPrimaryColor
                              : Colors.grey.withOpacity(0.5),
                        ),
                        SizedBox(height: 0.2 * kDefaultPadding),
                        Text(
                          'Offers',
                          style: Theme.of(context).textTheme.caption!.copyWith(
                                color: currentTab == 1
                                    ? kPrimaryColor
                                    : Colors.grey.withOpacity(0.5),
                              ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  MaterialButton(
                    minWidth: 40,
                    onPressed: () {
                      setState(() {
                        currentScreen = ProfilePage();
                        currentTab = 2;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/images/profile.png',
                          color: currentTab == 2
                              ? kPrimaryColor
                              : Colors.grey.withOpacity(0.5),
                        ),
                        Text(
                          'Profile',
                          style: Theme.of(context).textTheme.caption!.copyWith(
                                color: currentTab == 2
                                    ? kPrimaryColor
                                    : Colors.grey.withOpacity(0.5),
                              ),
                        ),
                      ],
                    ),
                  ),
                  MaterialButton(
                    minWidth: 40,
                    onPressed: () {
                      setState(() {
                        currentScreen = MorePage();
                        currentTab = 3;
                      });
                    },
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Image.asset(
                          'assets/images/more.png',
                          color: currentTab == 3
                              ? kPrimaryColor
                              : Colors.grey.withOpacity(0.5),
                        ),
                        Text(
                          'Menu',
                          style: Theme.of(context).textTheme.caption!.copyWith(
                                color: currentTab == 3
                                    ? kPrimaryColor
                                    : Colors.grey.withOpacity(0.5),
                              ),
                        )
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor:
            currentTab == 0 ? kPrimaryColor : Colors.grey.withOpacity(0.5),
        onPressed: () {
          setState(() {
            currentScreen = HomePage();
            currentTab = 0;
          });
        },
        child: const Icon(
          Icons.home,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      body: PageStorage(
        bucket: buckets,
        child: currentScreen,
      ),
    );
  }
}