How to add Drawer screen In flutter 

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.

To add a drawer to the app, wrap it in a scaffold widget. The scaffold widget provides a consistent visual structure to apps that follow the Material Design Guidelines. It also supports special Material Design components, such as Drawers and AppBars.

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 Scaffold.
2. Add a drawer.
3. Populate the drawer with items.
4. Close the drawer programmatically.

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.

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

Example 1. 

Drawer(
  // Add a ListView to the drawer. This ensures the user can scroll
  // through the options in the drawer if there isn't enough vertical
  // space to fit everything.
  child: ListView(
    // Important: Remove any padding from the ListView.
    padding: EdgeInsets.zero,
    children: [
      const DrawerHeader(
        decoration: BoxDecoration(
          color: Colors.blue,
        ),
        child: Text('Drawer Header'),
      ),
      ListTile(
        title: const Text('Item 1'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
      ListTile(
        title: const Text('Item 2'),
        onTap: () {
          // Update the state of the app.
          // ...
        },
      ),
    ],
  ),
);

Complete drawer code 

import ‘package:flutter/material.dart’;

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
const MyApp({super.key});

static const appTitle = ‘Drawer Demo’;

@override
Widget build(BuildContext context) {
return const MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}

class MyHomePage extends StatelessWidget {
const MyHomePage({super.key, required this.title});

final String title;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(title)),
body: const Center(
child: Text(‘My Page!’),
),
drawer: Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn’t enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(‘Drawer Header’),
),
ListTile(
title: const Text(‘Item 1’),
onTap: () {
// Update the state of the app
// …
// Then close the drawer
Navigator.pop(context);
},
),
ListTile(
title: const Text(‘Item 2’),
onTap: () {
// Update the state of the app
// …
// Then close the drawer
Navigator.pop(context);
},
),
],
),
),
);
}
}

Example

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’;
3. void main() => runApp(MyApp());
5. class MyApp extends StatelessWidget {
6.   final appTitle = ‘Flutter Drawer Demo’;
8.   @override
9.   Widget build(BuildContext context) {
10.     return MaterialApp(
11.       title: appTitle,
12.       home: MyHomePage(title: appTitle),
13.     );
14.   }
15. }
17. class MyHomePage extends StatelessWidget {
18.   final String title;
20.   MyHomePage({Key key, this.title}) : super(key: key);
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 for the following code

Another example

How to add drawer in flutter and define the em 

Step 1

Change main dart initial route to MyRoute.HomeRoute

Step 2

Create folder under lib in widgets folder and create a file in widgets folder with the name Drawer.dart and write the following code

import ‘package:flutter/cupertino.dart’;

import ‘package:flutter/material.dart’;

class MyDrawer extends StatelessWidget {

@override

Widget build(BuildContext context) {

final imageUrl =

“https://avatars.githubusercontent.com/u/12619420?s=460&u=26db98cbde1dd34c7c67b85c240505a436b2c36d&v=4”;

return Drawer(

child: Container(

color: Colors.deepPurple,

child: ListView(

padding: EdgeInsets.zero,

children: [

DrawerHeader(

padding: EdgeInsets.zero,

child: UserAccountsDrawerHeader(

margin: EdgeInsets.zero,

accountName: Text(“Ali”),

accountEmail: Text(“[email protected]”),

currentAccountPicture: CircleAvatar(

backgroundImage: NetworkImage(imageUrl),

),

),

),

ListTile(

leading: Icon(

CupertinoIcons.home,

color: Colors.white,

),

title: Text(

“Home”,

textScaleFactor: 1.2,

style: TextStyle(

color: Colors.white,

),

),

),

ListTile(

leading: Icon(

CupertinoIcons.profile_circled,

color: Colors.white,

),

title: Text(

“Profile”,

textScaleFactor: 1.2,

style: TextStyle(

color: Colors.white,

),

),

),

ListTile(

leading: Icon(

CupertinoIcons.mail,

color: Colors.white,

),

title: Text(

“Email me”,

textScaleFactor: 1.2,

style: TextStyle(

color: Colors.white,

),

),

)

],

),

),

);

}

}