Material Design drawer not showing in Flutter Web

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