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

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.

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("[email protected]"),
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.