In this blog I will guide you how to create a drawer in flutter apps in 2025. By Using of the drawer we can make a sidebar of the apps in the flutter.
Introduction of Drawer in flutter Apps:
The Drawer widget in Flutter is a panel that slides in from the side of the screen. You can click a button to open the Drawer, and inside it, you can place different elements such as menus, navigation links, or user information.
To create a drawer in flutter apps, you use the drawer argument inside the Scaffold widget. Inside the Drawer, you can add a child widget, such as a ListView, and place ListTile items inside it.
If you want to open the Drawer with a button in the middle of the screen, you can place a Center widget in the body of the Scaffold. Inside it, add an ElevatedButton. Then, wrap the button with a Builder widget. In the onPressed function of the button, call Scaffold.of(context).openDrawer() to open the Drawer.
By default, the Drawer opens from the left side. If you want it to open from the right side, you can use the endDrawer property of the Scaffold. To make the button work with the end drawer, you will need to call Scaffold.of(context).openEndDrawer().
And just like that, you can easily create a Drawer in your Flutter application.
Why We Use drawer in flutter apps :
We use a Drawer to provide a clean and easy way for users to navigate between different sections of an app. Instead of showing too many buttons or menus on the main screen, the Drawer hides them in a side panel, which can be opened when needed.
Benefits of Using Drawer:
- Saves Space – Keeps the main screen clean and uncluttered.
- Easy Navigation – Users can quickly move to Home, Profile, Settings, or other pages.
- Customizable – You can add text, icons, images, or even user details.
- Better User Experience – Makes the app look professional and organized.
- Supports Both Sides – Can open from the left (drawer) or right (endDrawer).
Examples drawer in flutter apps:
import 'package:flutter/material.dart';
class CustomDrawer extends StatelessWidget {
const CustomDrawer({super.key});
@override
Widget build(BuildContext context) {
return Drawer(
backgroundColor: Colors.white,
child: SafeArea(
child: Column(
children: [
// Header
DrawerHeader(
decoration: const BoxDecoration(color: AppColors.primary),
child: SizedBox.expand(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: const [
CircleAvatar(radius: 30, backgroundColor: Colors.white),
SizedBox(height: 10),
CustomTextWidget(
text: 'Welcome User',
color: Colors.white,
fontsize: 12,
),
CustomTextWidget(
text: 'sample@email.com',
color: Colors.white,
fontsize: 12,
),
],
),
),
),
// Drawer items (Dummy Only)
Expanded(
child: ListView(
padding: EdgeInsets.zero,
children: const [
_DrawerItem(icon: Icons.home, title: 'Home'),
_DrawerItem(icon: Icons.event, title: 'Applications'),
_DrawerItem(icon: Icons.report, title: 'Complaints'),
_DrawerItem(icon: Icons.description, title: 'Letters'),
_DrawerItem(icon: Icons.campaign, title: 'Speech'),
_DrawerItem(icon: Icons.supervised_user_circle_outlined, title: 'Users'),
_DrawerItem(icon: Icons.report, title: 'Reports'),
_DrawerItem(icon: Icons.mail_outline, title: 'Invitations'),
_DrawerItem(icon: Icons.settings, title: 'Settings'),
_DrawerItem(icon: Icons.logout, title: 'Logout'),
],
),
),
// Footer (only sample text, no company)
const Padding(
padding: EdgeInsets.symmetric(vertical: 12),
child: CustomTextWidget(
text: '© 2025 \nSample Footer Text',
textAlign: TextAlign.center,
fontsize: 10,
color: Colors.black,
),
),
],
),
),
);
}
}
class _DrawerItem extends StatelessWidget {
final IconData icon;
final String title;
const _DrawerItem({required this.icon, required this.title});
@override
Widget build(BuildContext context) {
return ListTile(
leading: Icon(icon, color: AppColors.primary, size: 32),
title: CustomTextWidget(text: title),
onTap: () {
// Dummy tap
Navigator.pop(context);
},
);
}
}
Conclusion :
In Flutter, drawer in flutter apps is an easy way to add a side navigation panel to your app. You can open it using a button, either on the left with openDrawer() or on the right with openEndDrawer(). By using Scaffold, ListView, and ListTile, you can quickly create a user-friendly menu that helps users move between different parts of the app.drawer in flutter apps is mostly use our application.
Read officials Documentation : Click Here
- What is a Drawer in Flutter?
A Drawer is a side panel that slides in from the left or right of the screen to show navigation links, menus, or other options. - Why should we use a Drawer?
We use it to keep the main screen clean while providing easy access to multiple pages or features in the app. - How do you add a Drawer in Flutter?
You add it using the drawer property in a Scaffold. Inside the Drawer, you can use widgets like ListView and ListTile for menu items. - Can we open a Drawer with a button?
Yes! Wrap the button with a Builder widget and call Scaffold.of(context).openDrawer() (or openEndDrawer() for right side). - Can the Drawer be customized?
Absolutely! You can add icons, text, images, user info, or any custom widget inside the Drawer.