Boby
Boby

Reputation: 1202

Open drawer menu from different stateful widget

I have 3 StatefulWidget, MainPage, CustomAppbar & ProfileCustomAppbar. In my MainPage I populate my drawer like this:

    Widget build(BuildContext context) {
    return MaterialApp(

      home: Scaffold(
        appBar: (currentPage == profilePage)

            ? ProfileCustomAppbar(
                height: 60,
              )
            : CustomAppbar(
                height: 60,
              ),
        endDrawer: populateDrawer(),
        body: Container(
          decoration: BoxDecoration(color: Colors.white),
          child: currentPage,
        ),

      ),
    );
  }
      populateDrawer() {
        return Theme(
          data: Theme.of(context).copyWith(
              canvasColor:
              Colors.white //This will change the drawer background to blue.
            //other styles
          ),
          child: Drawer(
            child: Column(
              children: <Widget>[
                DrawerHeader(
                  child: Center(
                    child: Image.asset("assets/images/lf_logo.png",
                        height: 100, width: 100),
                  ),
                ),
                Divider(color: Configuration.PrimaryColor),

              ],
            ),
          ),
        );
      }

Now I want to open the drawer from ProfileCustomAppbar here is how I call the drawer:

IconButton(
               icon: Icon(Icons.settings, color: Colors.brown,),
               onPressed: () {
                 Scaffold.of(context).openDrawer();
               },
             )

but the drawer is not open, how can I fix it?

Upvotes: 2

Views: 2894

Answers (4)

lethanhclub
lethanhclub

Reputation: 11

You can create a callback function which will call _scaffoldKey.currentState.openEndDrawer(); at where _scaffoldKey belongs to. Then, you pass that callback function to where you want to call it.

Upvotes: 0

Boby
Boby

Reputation: 1202

this how i fix it ,

First i create new function in the parent widget

  openTheDrawer(){
    _scaffoldKey.currentState.openEndDrawer();
  }

then i called the function in the the other statefull widget

 widget.parent.openTheDrawer();

Upvotes: 1

Agreensh
Agreensh

Reputation: 1401

Use a key for the scaffold, then fetch the correct context with that key

  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
...

then

  IconButton(
    icon: Icon(
      Icons.settings,
      color: Colors.brown,
    ),
    onPressed: () {
      _scaffoldKey.currentState.openDrawer();
    },
  )

Upvotes: 2

Ritesh Sharma
Ritesh Sharma

Reputation: 77

You are required to wrap your IconButton widget inside a Builder widget for opening the drawer. Refer the below code:

      Builder(
        builder: (BuildContext context) {
          return new IconButton(
            icon: Icon(Icons.category),
            onPressed: () {
              Scaffold.of(context).openDrawer();
            },
          );
        },
      ),

Upvotes: 5

Related Questions