Material Design drawer not showing in Flutter Web - flutter

Question

I am trying to figure out why the drawer widget is not rendered in my Flutter Web page.
import 'package:responsive_builder/responsive_builder.dart';
class HomeLayout extends StatelessWidget {
const HomeLayout({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ResponsiveBuilder(
builder: (context, sizingInformation) => Scaffold(
drawer: sizingInformation.deviceScreenType == DeviceScreenType.desktop
? null
: NavigationDrawer(),
backgroundColor: Colors.white,
body: Center(
child: Column(
children: <Widget>[
NavigationBar(),
Expanded(
child: Navigator(
key: locator<NavigationService>().navigatorKey,
onGenerateRoute: generateRoute,
initialRoute: HomeRoute,
),
)
],
),
),
),
);
}
...
class NavigationDrawer extends StatelessWidget {
const NavigationDrawer({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: SizedBox.shrink(),
decoration: BoxDecoration(
color: Color(0xff2acccc),
),
),
DrawerItem('Login', LoginToAdmin),
],
),
);
}
}
...
class NavigationBar extends StatelessWidget {
const NavigationBar({ Key key }) : super(key: key);
#override
Widget build(BuildContext context) {
return ScreenTypeLayout(
mobile: NavigationBarMobile(),
tablet: NavigationBarTabletDesktop(),
);
}
}
...
class NavigationBarMobile extends StatelessWidget {
const NavigationBarMobile({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 80,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
)),
Expanded(
child: NavBarLogo(),
),
Expanded(
child: SizedBox.shrink(),
),
],
),
);
}
}
I am trying out Flutter Web, and run the project with "flutter run -d chrome"
When I click on the burger menu nothing happens, apart from the ripple effect.
I am pretty sure I am doing something wrong in my ResponsiveBuilder() widget, but what that is, is not clear to me.
this incredible pen demonstrates that it should work codePen
Any help will be much appreciate

Answer 1

You'll need to add an AppBar() to your Scaffold() for the drawer to be visible, similar to the following:
return Scaffold(
drawer: const MyDrawer(),
appBar: AppBar(
title: const Text('Hello'),
));