flutterflutter-layoutflutter-navigationflutter-drawer

How to close the navigation drawer when returning back from a particular screen automatically in flutter?


I am working on a flutter project which has a navigation drawer with three routes. Whenever i go to a particular route and come back, the navigation drawer gets opened automatically. I want the navigation drawer to remain closed until and unless the user specifically clicks on it. Is there any way to achieve this?

Here's my code:

class NavList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: <Widget>[
          UserAccountsDrawerHeader(
            decoration: BoxDecoration(
                image: DecorationImage(
              image: AssetImage('images/orange.png'),
              fit: BoxFit.cover,
            )),
            arrowColor: Colors.deepOrangeAccent[700],
            accountName: Text(''),
            accountEmail: Text(
              'username@gmail.com',
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 20.0,
              ),
            ),
            currentAccountPicture: CircleAvatar(
              radius: 22.0,
              backgroundColor: Colors.deepOrangeAccent[700],
              backgroundImage: AssetImage('images/profile.png'),
            ),
          ),
          ListItems(
            listTitle: 'Shops',
            listIcon: Icon(Icons.shop),
            listFunction: () {
              Navigator.pushNamed(context, ShopScreen.id);
            },
          ),
          ListItems(
            listTitle: 'Orders',
            listIcon: Icon(Icons.monetization_on),
            listFunction: () {
              Navigator.pushNamed(context, OrderScreen.id);
            },
          ),
          ListItems(
            listTitle: 'Logout',
            listIcon: Icon(Icons.logout),
            listFunction: () {
              Navigator.pushNamed(context, LoginScreen.id);
            },
          ),
        ],
      ),
    );
  }
}

I have refactored ListItems.

class ListItems extends StatelessWidget {
  ListItems({this.listTitle, this.listIcon, this.listFunction});
  final String listTitle;
  final Icon listIcon;
  final Function listFunction;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(listTitle),
      leading: IconButton(
        icon: listIcon,
        onPressed: () {
          
        },
      ),
      onTap: listFunction,
    );
  }
}

Solution

  • There are some ways to do that like:

    onPressed:(){
       Navigator.pop(context);
       Navigator.pushNamed(context, ShopScreen.id);
     }
    

    or use .then of the navigator:

    onPressed:(){
       Navigator.pushNamed(context, ShopScreen.id).then((val){
       Navigator.pop(context);
      });
     }
    

    additionally, you can check If the drawer currently open or not:

    onPressed:(){
       Navigator.pushNamed(context, ShopScreen.id).then((val){
        if(Scaffold.of(context).isDrawerOpen){
         Navigator.pop(context);
         }
       });
      }