Build a Beautiful Navigation Drawer/Sidebar Menu in Flutter
Tags: flutter, navigation, drawer, programming
Published: 2022-02-11 18:00:46

In this article I will teach you how to build navigation drawer / sidebar menu in flutter.
**Drawer** is a Material Design panel that slides horizontally from the left edge of the Scaffold, the device screen. Drawer is used with the Scaffold drawer (left-side) property. Drawer can be customized for each individual need but usually has a header to show an image or fixed information and a **ListView** to show a list of navigable pages. Usually, a Drawer is used when the navigation list has many items.

**→ Step-1:** Create a flutter project.

**→ Step-2 :** Create a flutter stateless widget and name it Birthdays. Also add that widget in **home** property.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13otiprffpa9l9v4yhvs.png)

→ Step-3 : Add Scaffold, Appbar, body & drawer properties.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vmz4ciy6g8e70pk0v070.png)
Now the app will look like this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lv8i78ge9tkykbuqhq4w.png)

→ Step-4: Add drawer header, currentAccountPicture, accountName, accountEmail and otherAccountsPictures.

To set the Drawer header, you have built-in options, the UserAccountsDrawerHeader. The UserAccountsDrawerHeader is intended to display the app’s user details by setting the currentAccountPicture, accountName, accountEmail, otherAccountsPictures, and decoration properties. Add ListView to show a list of navigable pages.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/caywq0x44lyugql5h4o7.png)

Now the app will look like this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5htsx0rpnjqbhl7pqrl7.png)

→ Step-5: Add few listTile & navigation in the drawer.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oce725d12u7uhfywrmnn.png)
Now the app will look like this.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krgamzvobao3nnbg9zhm.png)
This drawer app suitable for both portrait or landscape mode.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5kap8vj56wwivmq8x90.png)

Full Code :

```

import ‘package:flutter/material.dart’;
void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: ‘Flutter Demo’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const Birthdays(),
);
}
}
class Birthdays extends StatelessWidget {
const Birthdays({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(‘Drawer’),
),
body: const Center(
child: Icon(
Icons.cake,
size: 120.0,
color: Colors.orange,
),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
UserAccountsDrawerHeader(
currentAccountPicture: Icon(
Icons.face,
size: 48.0,
color: Colors.white,
),
otherAccountsPictures: [
Icon(
Icons.bookmark_border,
color: Colors.white,
),
],
accountName: Text(‘H. A. Smrity’),
accountEmail: Text(‘test@gmail.com’),
),
ListTile(
leading: Icon(Icons.date_range),
title: Text(‘Birth date’),
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => BirthDate(),
),
),
),
ListTile(
leading: Icon(Icons.mood),
title: Text(‘Mood’),
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => Mood(),
),
),
),
ListTile(
leading: Icon(Icons.note_add),
title: Text(‘Note’),
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => Note(),
),
),
),
Divider(),
ListTile(
leading: Icon(Icons.settings),
title: Text(‘Settings’),
onTap: () => Navigator.pop(context),
),
],
),
),
);
}
}
class Note extends StatelessWidget {
const Note({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Note’),
),
body: Center(
child: Icon(
Icons.note_add,
size: 120.0,
color: Colors.orange,
),
),
);
}
}
class Mood extends StatelessWidget {
const Mood({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Mood’),
),
body: Center(
child: Icon(
Icons.mood,
size: 120.0,
color: Colors.orange,
),
),
);
}
}
class BirthDate extends StatelessWidget {
const BirthDate({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Birth Date’),
),
body: Center(
child: Icon(
Icons.date_range,
size: 120.0,
color: Colors.orange,
),
),
);
}
}
```
[Watch on Youtube](https://www.youtube.com/watch?v=PGAnI4Rb6b8)