Build a Beautiful Navigation Drawer/Sidebar Menu in Flutter

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.

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

Now the app will look like this.

→ 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.

Now the app will look like this.

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

Now the app will look like this.

This drawer app suitable for both portrait or landscape mode.

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(‘[e-mail]’),
),
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

Comments

[Utkarsh Shrivastava]

from which angle this is a beautiful navigation drawer?