Flutter: Inflate drawer in webview

Question

I am using a Drawer in a Scaffold menu. When I make the window in the web-view smaller, the Drawer vanishes and a small button appears. which opens the menu from the left.

I would like to keep the drawer in this deflated version for full window size, but I get a static menu. How do I change that?

Code:

Scaffold(
      drawer: DrawerMenu(),
      ...
        )

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

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          Container(
            padding: EdgeInsets.all(appPadding),
            child: Image.asset("assets/images/mylogo.png"),
          ),
          DrawerListTile(
              title: 'Something',
              svgSrc: 'assets/icons/Dashboard.svg',
              tap: () {Navigator.pop(context);}),
          DrawerListTile(
              title: 'Somethingelse',
              svgSrc: 'assets/icons/BlogPost.svg',
              tap: () {Navigator.pop(context);}),
        ],
      ),
    );
  }
}`

Answer 1

The usage of drawer property in Scaffold is to show & hide the drawer.

To make the drawer always visible in full window size, try create as a seperate widget based on width of the screen

  @override
  Widget build(BuildContext context) {
    var isBig = MediaQuery.of(context).size.width > 600.0; // set width threshold
    return Scaffold(
      appBar: ...
      drawer: isBig ? null : DrawerMenu(), 
      body: isBig
              ? Row(
                  children: [
                    DrawerMenu(),
                    Expanded(
                      child: bodyContent,
                    ),
                  ],
                )
              : bodyContent;
    );