Flutter: have drawer block bottom navigation bar - flutter

Question

I have a simple app that has 4 main pages as mentioned on the bottom navigation bar, and also a subpage (a page you can access from the main page but its not a page you can access from the bottom navigation bar.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class Page extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('Home'),
),
body: Container(
child: const Center(
child: Text("Random Page"),
),
),
);
}
}
class PageDrawer extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
endDrawer: const Drawer(),
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text('drawer'),
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text("I want the drawer to cover the nav bar here"),
Center(
child: TextButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (_) => SubPage()),
);
},
child: const Text('Go to sub page'),
),
),
],
),
),
);
}
}
class SubPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.green,
title: const Text('subpage'),
),
body: const Padding(
padding: EdgeInsets.all(15.0),
child: Center(
child: Text(
"The navbar is active here and has a different appbar from the previous page"),
),
));
}
}
class CustomTab extends StatelessWidget {
CustomTab({required this.child});
final Widget child;
late BuildContext tabContext;
#override
Widget build(BuildContext context) {
return CupertinoTabView(
builder: (BuildContext context) {
tabContext = context;
return child;
},
);
}
}
class Tabbed extends StatefulWidget {
#override
_TabbedState createState() => _TabbedState();
}
class _TabbedState extends State<Tabbed> {
int _currentTab = 0;
final List<CustomTab> tabs = <CustomTab>[
CustomTab(
child: Page(),
),
CustomTab(
child: PageDrawer(),
),
CustomTab(
child: Page(),
),
CustomTab(
child: Page(),
),
];
Future<void> _setTab(int index) async {
if (_currentTab == index) {
if (Navigator.of(tabs[index].tabContext).canPop()) {
Navigator.of(tabs[index].tabContext)
.popUntil((Route<dynamic> r) => r.isFirst);
}
return;
}
setState(() {
_currentTab = index;
});
}
#override
Widget build(BuildContext context) {
return Material(
child: Column(
children: <Widget>[
_buildStack(),
_buildTabs(),
],
),
);
}
Widget _buildStack() {
return Expanded(
child: Container(
decoration: const BoxDecoration(
color: Colors.white,
),
child: IndexedStack(
sizing: StackFit.expand,
index: _currentTab,
children: tabs,
),
),
);
}
Widget _buildTabs() {
return Container(
color: Colors.blue,
child: SafeArea(
top: false,
child: SizedBox(
height: 55.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
iconSize: 30.0,
color: _currentTab == 0
? const Color.fromRGBO(58, 66, 86, 1.0)
: const Color.fromRGBO(58, 66, 86, 0.3),
icon: const Icon(Icons.home),
onPressed: () {
_setTab(0);
},
),
IconButton(
iconSize: 30.0,
color: _currentTab == 1
? const Color.fromRGBO(58, 66, 86, 1.0)
: const Color.fromRGBO(58, 66, 86, 0.3),
icon: const Icon(Icons.search),
onPressed: () {
_setTab(1);
},
),
IconButton(
iconSize: 30.0,
color: _currentTab == 2
? const Color.fromRGBO(58, 66, 86, 1.0)
: const Color.fromRGBO(58, 66, 86, 0.3),
icon: const Icon(Icons.notifications),
onPressed: () {
_setTab(2);
},
),
IconButton(
iconSize: 30.0,
color: _currentTab == 3
? const Color.fromRGBO(58, 66, 86, 1.0)
: const Color.fromRGBO(58, 66, 86, 0.3),
icon: const Icon(Icons.settings),
onPressed: () {
_setTab(3);
},
)
],
),
),
),
);
}
}
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Tabbed(),
);
}
}
void main() => runApp(App());
The issue I have with it currently is that I want the drawer (on the second page) to open over the navigational bar. I understand that to do so I must have the drawer on the same level or above the navbar, but the only way I can think of doing that is to have a predefined appbar in the scaffold. The reason this doesnt work for me is that I would like the sub page to have a different appbar style but I have no known way of differentiating between them since the page index for the subpage and the main page is the same.
So this would be an invalid solution:
appbar: (_index == 1) ? Appbar() : null,
At this point im out of ideas and would appreciate any suggestions :)