How to use Provider to persist the state of Pages while navigating (Flutter) - flutter

Question

I'm very new to flutter and super noob with state management.
I am trying to make an app with 5 tabs in BottomBar, and each of them have multiple pages navigated inside them. Currently If I try to navigate from one of the main pages to their child pages, the AppBar and Bottombar disappears. Below is my current code for my home page. The code represents the things I want to display in every page of the app.
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
int currentTab = 0; // to keep track of active tab index
final List<Widget> screens = [
Feed(key: PageStorageKey('Feed'),),
Insights(key: PageStorageKey('Insights'),),
Data(key: PageStorageKey('Data'),),
Profile(key: PageStorageKey('Profile'),),
ZPart(key: PageStorageKey('Zpart'),),
];
final PageStorageBucket bucket = PageStorageBucket();
Widget currentScreen = Feed();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
iconTheme: IconThemeData(color: Colors.black),
backgroundColor: Colors.white,
title: Text(
'Zecide',
style: TextStyle(
fontFamily: "Raleway-Black.ttf",
fontSize: 23.0,
color: Color(0xFF3F5EFB),
letterSpacing: 2.0,
fontWeight: FontWeight.w800,
),
),
actions: <Widget>[
Padding(
padding: const EdgeInsets.all(2.0),
child: IconButton(
icon: Icon(Icons.search),
onPressed: (){
},),
),
Padding(
padding: const EdgeInsets.all(2.0),
child: IconButton(icon: Icon(Icons.notifications, color: Colors.blueAccent),
onPressed: (){
},),
)
],
),
////// Drawer ///////
drawer: Drawer(
elevation: 5,
child: ListView(
children: <Widget>[
DrawerHeader(
child: Text('Siddharth Singh', style: TextStyle(fontSize: 22, fontWeight: FontWeight.w700, color: Colors.white),),
decoration: BoxDecoration(color: Colors.blueAccent,),
),
ListTile(title: Text('Settings'),),
ListTile(title: Text('Account Details'),),
ListTile(title: Text('Logout'),),
ListTile(title: Text('Version'), subtitle: Text('Version 1.0 Beta'),),
],
),
),
body: PageStorage(
child: currentScreen,
bucket: bucket,
),
///// Below is bottombar ( Kinda lengthy, you can skip if you want from here) //
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.white,
child: Container(
height: 50.0,
width: 50.0,
child: Image.asset("assets/logo.png"),
),
onPressed: () {
setState(() {
currentScreen = ZPart();
currentTab = 69;
});
},
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
notchMargin: 10,
child: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
MaterialButton(
minWidth: 40,
onPressed: () {
setState(() {
currentScreen =
Feed(); // if user taps on this dashboard tab will be active
currentTab = 0;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
FontAwesomeIcons.newspaper,
color: currentTab == 0 ? Colors.blueAccent : Colors.grey,
),
Text(
'Feed',
style: TextStyle(
color: currentTab == 0 ? Colors.black87 : Colors.grey,
fontFamily: "Quicksand-Light",
fontWeight: FontWeight.w400,
),
),
],
),
),
SizedBox(width: 10.0,),
MaterialButton(
minWidth: 40,
onPressed: () {
setState(() {
currentScreen =
Insights(); // if user taps on this dashboard tab will be active
currentTab = 1;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
FontAwesomeIcons.chartBar,
color: currentTab == 1 ? Colors.blueAccent : Colors.grey,
),
Text(
'Insights',
style: TextStyle(
color: currentTab == 1 ? Colors.black87 : Colors.grey,
fontFamily: "Quicksand-Light",
fontWeight: FontWeight.w400,
),
),
],
),
)
],
),
// Right Tab bar icons
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
MaterialButton(
minWidth: 40,
onPressed: () {
setState(() {
currentScreen =
Data(); // if user taps on this dashboard tab will be active
currentTab = 2;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.pie_chart_outlined,
color: currentTab == 2 ? Colors.blueAccent : Colors.grey,
),
Text(
'Data',
style: TextStyle(
color: currentTab == 2 ? Colors.black87 : Colors.grey,
fontFamily: "Quicksand-Light",
fontWeight: FontWeight.w400,
),
),
],
),
),
SizedBox(width: 10.0,),
MaterialButton(
minWidth: 40,
onPressed: () {
setState(() {
currentScreen =
Profile(); // if user taps on this dashboard tab will be active
currentTab = 3;
});
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
FontAwesomeIcons.user,
color: currentTab == 3 ? Colors.blueAccent : Colors.grey,
),
Text(
'Profile',
style: TextStyle(
color: currentTab == 3 ? Colors.black87 : Colors.grey,
fontFamily: "Quicksand-Light",
fontWeight: FontWeight.w400,
),
),
],
),
)
],
)
],
),
),
),
);
}
}
Although I had used PageStorage in the code, but I'm not very happy with it. As navigating to the child pages while persisting the state seemed confusing. With my current understanding I think all these issues can be solved by provider. I have seen tutorials for provider, but still lacked the clarity to solve this particular issue.
Do comment on how I can improve this question and solve it, Thanks for your time!
I'm attaching images of the app Home screen