About drawer display in flutter responsive website

Question

when I click the drawer icon, it does not display Listview( DrawerHeader, Listitems), how to correct this problem, This is its code. how I change MobileNavbar class, click the drawer icon to display content. (When I click the drawer icon, the expected behaviour is for it to display a ListView containing a DrawerHeader and a list of items. However, the current code is not achieving this functionality. To correct this problem and ensure that the content is displayed when the drawer icon is clicked, modifications need to be made to the MobileNavbar class.)

import 'package:flutter/material.dart';

class Navbar extends StatelessWidget {
  const Navbar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 1200) {
          return DesktopNavbar();
        } else if (constraints.maxWidth > 800 && constraints.maxWidth < 1200) {
          return DesktopNavbar();
        } else {
          return MobileNavbar();
        }
      },
    );
  }
}

class DesktopNavbar extends StatelessWidget {
  const DesktopNavbar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 40),
      child: Container(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            const Text(
              "RetroPortal Studio",
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white,
                fontSize: 30,
              ),
            ),
            Row(
              children: [
                const Text("Home", style: TextStyle(color: Colors.white)),
                const SizedBox(
                  width: 30,
                ),
                const Text("About Us", style: TextStyle(color: Colors.white)),
                const SizedBox(
                  width: 30,
                ),
                const Text("Portfolio", style: TextStyle(color: Colors.white)),
                const SizedBox(
                  width: 30,
                ),
                MaterialButton(
                  color: const Color.fromARGB(255, 235, 53, 113),
                  shape: const RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                  ),
                  onPressed: () {},
                  child: const Padding(
                    padding:
                        EdgeInsets.symmetric(vertical: 10, horizontal: 25),
                    child: Text(
                      "Get Started",
                      style: TextStyle(
                          color: Colors.white, fontWeight: FontWeight.w500),
                    ),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

class MobileNavbar extends StatelessWidget {
  const MobileNavbar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 20, horizontal: 40),
      child: Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            IconButton(
              icon: Icon(
                Icons.menu,
                color: Colors.white,
              ),
              onPressed: () {
                 Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text('Drawer Header'),
            ),
            ListTile(
              title: const Text('Home'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: const Text('About Us'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      );
              },
            ),
            const SizedBox(height: 20),
            const Text(
              "RetroPortal Studio",
              style: TextStyle(
                fontWeight: FontWeight.bold,
                color: Colors.white,
                fontSize: 30,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

A drawer needs to defined at the scaffold level, you are just make a Drawer widget in your onPressed, which does not do anything. Your navbar onPressed would call the openDrawer on the context of your scaffold

Scaffold.of(context).openDrawer()

where you would have to ensure your navbar widget is a child of Scaffold.