Drawer won't open - menu icon not clickable

Help & Developmnet State Management
1

I have built my own AppBar because I wanted tabs at the top. I added to the left a menu IconButton() which when pressed should open the drawer. But it does not! here is my code:

return DefaultTabController(
      initialIndex: tab,
      length: 4,
      child: Scaffold(
          key: _key,
          drawer: const AppNavigationDrawer(),
          backgroundColor: Theme.of(ctxt).scaffoldBackgroundColor,
          body: SafeArea(
            bottom: false,
            child: Column(
              children: [
                Row(
                  children: [
                    Expanded(
                      child: IconButton(
                        onPressed: () => widget.openDrawer,
                        icon: const Icon(
                          Icons.menu,
                          size: 30,
                          color: Colors.white,
                        ),
                      ),
                    ),

I tried using the Scaffold of context method:

onPressed: () => Scaffold.of(context).openDrawer(),

That didn’t work either. What did work was using a key and the current app state. Here is my final fix

put at top of class:

  final GlobalKey<ScaffoldState> _key = GlobalKey(); //drawer

In your Scaffold() put the key in there:

return DefaultTabController(
      initialIndex: tab,
      length: 4,
      child: Scaffold(
          key: _key,
          drawer: const AppNavigationDrawer(),
          backgroundColor: Theme.of(ctxt).scaffoldBackgroundColor,
          body: SafeArea(

and finally use the key to activate/deactivate the drawer:

Expanded(
                      child: IconButton(
                        onPressed: () => _key.currentState!.openDrawer(),
                        icon: const Icon(
                          Icons.menu,
                          size: 30,
                          color: Colors.white,
                        ),
                      ),
                    ),