How to create a Sidebar Menu /Drawer in flutter using drawer class

Drawer class

A material design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application.

Drawers are typically used with the Scaffold.drawer property. The child of the drawer is usually a ListView whose first child is a DrawerHeader that displays status information about the current user. The remaining drawer children are often constructed with ListTiles, often concluding with an AboutListTile.

The AppBar automatically displays an appropriate IconButton to show the Drawer when a Drawer is available in the Scaffold. The Scaffold automatically handles the edge-swipe gesture to show the drawer.

This example shows how to create a Scaffold that contains an AppBar and a Drawer. A user taps the "menu" icon in the AppBar to open the Drawer. The Drawer displays four items: A header and three menu items. The Drawer displays the four items using a ListView, which allows the user to scroll through the items if need be.

Full Example:

Scaffold( appBar: AppBar( title: const Text('Drawer Demo'), ), drawer: Drawer( child: ListView( padding: EdgeInsets.zero, children: const <Widget>[ DrawerHeader( decoration: BoxDecoration( color: Colors.blue, ), child: Text( 'Drawer Header', style: TextStyle( color: Colors.white, fontSize: 24, ), ), ), ListTile( leading: Icon(Icons.message), title: Text('Messages'), ), ListTile( leading: Icon(Icons.account_circle), title: Text('Profile'), ), ListTile( leading: Icon(Icons.settings), title: Text('Settings'), ), ], ), ), )

An open drawer can be closed by calling Navigator.pop. For example a drawer item might close the drawer when tapped:

ListTile(
  leading: Icon(Icons.change_history),
  title: Text('Change history'),
  onTap: () {
    // change app state...
    Navigator.pop(context); // close the drawer
  },
);