Flutter Drawer

The mobile apps that use Material Design have two primary options for navigation. These navigations are Tabs and Drawers. A drawer is an alternative option for tabs because sometimes the mobile apps do not have sufficient space to support tabs.

A drawer is an invisible side screen. It is a sliding left menu that generally contains important links in the application and occupies half of the screen when displayed.

Let us see how the drawer works in a Flutter. Flutter uses a drawer widget to create a sliding left menu layout with a Material Design widget. The following steps are required to use a drawer in the app.

1. Create a Flutter Project.
2. Add drawer in scaffold widget
3. Populate the drawer by adding content
4. Close the drawer.

Step 1: Create a Flutter project in the IDE. Here, I am going to use Android Studio.

Step 2: Open the project in Android Studio and navigate to the lib folder. In this folder, open the main.dart file.

Step 3: In the main.dart file, create a drawer in the scaffold widget as the code given below.

1. Scaffold(  
2.   drawer: Drawer(  
3.     child: // Populate the Drawer by adding content in the next step.  
4.   )  
5. );  

Step 4: Next, we need to add content in the drawer. In this example, we are going to use the Listview widget that allows the users to scroll through the drawer if the content does not fit in the screen supports. The following code explains it more clearly.

1. Drawer(  
2.   child: ListView(  
3.     padding: EdgeInsets.zero,  
4.     children: <Widget>[  
5.       DrawerHeader(  
6.         child: Text('Drawer Header'),  
7.         decoration: BoxDecoration(  
8.           color: Colors.blue,  
9.         ),  
10.       ),  
11.       ListTile(  
12.         title: Text('Item 1'),  
13.         onTap: () {  
14.           // Update the state of the app.  
15.           // ...  
16.         },  
17.       ),  
18.       ListTile(  
19.         title: Text('Item 2'),  
20.         onTap: () {  
21.           // Update the state of the app.  
22.           // ...  
23.         },  
24.       ),  
25.     ],  
26.   ),  
27. );  

Step 5: Finally, close the drawer. We can do this by using the navigator.

Let us see the complete code of the above steps. Open the main.dart file and replace the following code.

1. import 'package:flutter/material.dart';  
2.   
3. void main() => runApp(MyApp());  
4.   
5. class MyApp extends StatelessWidget {  
6.   final appTitle = 'Flutter Drawer Demo';  
7.   
8.   @override  
9.   Widget build(BuildContext context) {  
10.     return MaterialApp(  
11.       title: appTitle,  
12.       home: MyHomePage(title: appTitle),  
13.     );  
14.   }  
15. }  
16.   
17. class MyHomePage extends StatelessWidget {  
18.   final String title;  
19.   
20.   MyHomePage({Key key, this.title}) : super(key: key);  
21.   
22.   @override  
23.   Widget build(BuildContext context) {  
24.     return Scaffold(  
25.       appBar: AppBar(title: Text(title)),  
26.       body: Center(child: Text(  
27.           'A drawer is an invisible side screen.',  
28.           style: TextStyle(fontSize: 20.0),  
29.           )  
30.       ),  
31.       drawer: Drawer(  
32.         child: ListView(  
33.           // Important: Remove any padding from the ListView.  
34.           padding: EdgeInsets.zero,  
35.           children: <Widget>[  
36.             UserAccountsDrawerHeader(  
37.               accountName: Text("Abhishek Mishra"),  
38.               accountEmail: Text("abhishekm977@gmail.com"),  
39.               currentAccountPicture: CircleAvatar(  
40.                 backgroundColor: Colors.orange,  
41.                 child: Text(  
42.                   "A",  
43.                   style: TextStyle(fontSize: 40.0),  
44.                 ),  
45.               ),  
46.             ),  
47.             ListTile(  
48.               leading: Icon(Icons.home), title: Text("Home"),  
49.               onTap: () {  
50.                 Navigator.pop(context);  
51.               },  
52.             ),  
53.             ListTile(  
54.               leading: Icon(Icons.settings), title: Text("Settings"),  
55.               onTap: () {  
56.                 Navigator.pop(context);  
57.               },  
58.             ),  
59.             ListTile(  
60.               leading: Icon(Icons.contacts), title: Text("Contact Us"),  
61.               onTap: () {  
62.                 Navigator.pop(context);  
63.               },  
64.             ),  
65.           ],  
66.         ),  
67.       ),  
68.     );  
69.   }  
70. }  

Output

Now, run the app in Android Studio. It will give the following screen.

When you click on the top left corner of the above screen, you can see the drawer sliding left that generally contains important links in the application and occupies half of the screen.