How to hide drawer in flutter after changing Scaffold.body value

Question

I am using the method in this question to change the body of a Scaffold in flutter:

Flutter Drawer Widget - change Scaffold.body content

The method described works perfectly. Now I would like just the drawer to automatically close after the users taps on one of the items.

I tried using the Navigator.pop() method, but it pops the entire screen, not just the drawer. It leaves me with a totally black screen.

Any suggestions?

Solution 1

Are you using exactly Navigator.of(context).pop()? I cannot reproduce your problem, can you post a minimal example to reproduce it?

The following code works as expected: the settings button pops away the drawer, while the other don't.

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String text = "Initial Text";

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        drawer: new Drawer(
          child: new ListView(
            children: <Widget>[
              new Container(child: new DrawerHeader(child: new Container())),
              new Container (
                child: new Column(
                    children: <Widget>[
                      new ListTile(leading: new Icon(Icons.info),
                          onTap:(){
                            setState((){
                              text = "info pressed";
                            });
                          }
                      ),
                      new ListTile(leading: new Icon(Icons.save),
                          onTap:(){
                            setState((){
                              text = "save pressed";
                            });
                          }
                      ),
                      new ListTile(leading: new Icon(Icons.settings),
                          onTap:(){
                            setState((){
                              text = "settings pressed";
                            });
                            Navigator.of(context).pop();
                          }
                      ),

                    ]
                ),
              )
            ],
          ),
        ),
        appBar: new AppBar(title: new Text("Test Page"),),
        body: new Center(child: new Text((text)),
        ));
  }
}

Solution 2

create scaffoldKey

close drawer

 _scaffoldKey.currentState.openEndDrawer(),

open drawer

scaffoldKey.currentState.openDrawer(),

Example

     InkWell(
        onTap: ()=> widget.scaffoldKey.currentState.openDrawer(),
        child: Icon(
          Icons.menu,
          size: 38,
          color: Color(0xFFFFFFFF),
        ),
      ), 

Solution 3

If you are using a MaterialApp you need to use Scaffold.of(context).openEndDrawer() that way you do not need to create a GlobalKey.

class Menu extends StatelessWidget {
  const Menu({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView(
      padding: EdgeInsets.zero,
      children: [
        FlatButton(
          onPressed: () {
            Navigator.of(context).pushNamed('/');
            Scaffold.of(context).openEndDrawer();
          },
          child: ListTile(
            leading: Icon(Icons.home),
            title: Text('Home'),
          ),
        ),
        FlatButton(
          onPressed: () {
            Navigator.of(context).pushNamed('/about');
            Scaffold.of(context).openEndDrawer();
          },
          child: ListTile(
            leading: Icon(Icons.question_answer),
            title: Text('About'),
          ),
        ),
      ],
    );
  }
}

Comments

[juanarzac]

You are correct. It turns out that I was wrapping the Scaffold in a MaterialApp. This was causing the issue. Thanks!

[AVEbrahimi]

openEndDrawer opens drawers at end of screen!

[ptrckdev]

I think this is a horrible hack but I think it saved my day. Somehow my ListTiles are in a different context to my Scaffold, so I have no access to the Navigator from there to close the Drawer. Strange in the first place that there is no closeDrawer() method on the key, which I can inject into my ListTile. Openening the EndDrawer first closes the drawer. So as long as i dont have a EndDrawer I can use this method.