How to make a Persistent BottomAppBar? - flutter

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