In this article, We’re going to learn how to display beautiful drawers with an example (flutter drawer example).
checkout our flutter tutorial for more topics
How to display drawer in Flutter?
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(),
);
}
In the above example, we’ve display Drawer(). This is a property of Scaffold(). so the output looks like this
How to add header in Flutter drawer?
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
child: Text("Hello"),
decoration: BoxDecoration(
color: Colors.red,
),
),
],
),
),
);
}
In this above example, we’re adding DrawerHeader() with BoxDecoration() including background color. The output looks like this
How to add background image for Flutter drawer?
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
child: Text("Hello"),
decoration: BoxDecoration(
color: Colors.red,
image: DecorationImage(
image: NetworkImage(
"https://appmaking.co/wp-content/uploads/2021/08/android-drawer-bg.jpeg",
),
fit: BoxFit.fill,
),
),
),
],
),
),
);
}
In the above example, we’ve added a background image for the drawer header. The output looks like this
How to add List in Drawer?
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
child: Stack(
children: [
Positioned(
bottom: 8.0,
left: 4.0,
child: Text(
"App Making.co",
style: TextStyle(color: Colors.white, fontSize: 20),
),
)
],
),
decoration: BoxDecoration(
color: Colors.red,
image: DecorationImage(
image: NetworkImage(
"https://appmaking.co/wp-content/uploads/2021/08/android-drawer-bg.jpeg",
),
fit: BoxFit.fill,
),
),
),
ListTile(
leading: Icon(Icons.home),
title: Text("Home"),
onTap: () {},
),
ListTile(
leading: Icon(Icons.account_box),
title: Text("About"),
onTap: () {},
),
ListTile(
leading: Icon(Icons.grid_3x3_outlined),
title: Text("Products"),
onTap: () {},
),
ListTile(
leading: Icon(Icons.contact_mail),
title: Text("Contact"),
onTap: () {},
)
],
),
),
);
}
In the above example, we’ve added the list of items for a drawer. The Output looks like this
How to add user profile in Flutter drawer?
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
children: [
UserAccountsDrawerHeader(
accountName: Text("AppMaking.co"),
accountEmail: Text("sundar@appmaking.co"),
currentAccountPicture: CircleAvatar(
backgroundImage: NetworkImage(
"https://appmaking.co/wp-content/uploads/2021/08/appmaking-logo-colored.png"),
),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
"https://appmaking.co/wp-content/uploads/2021/08/android-drawer-bg.jpeg",
),
fit: BoxFit.fill,
),
),
otherAccountsPictures: [
CircleAvatar(
backgroundColor: Colors.white,
backgroundImage: NetworkImage(
"https://randomuser.me/api/portraits/women/74.jpg"),
),
CircleAvatar(
backgroundColor: Colors.white,
backgroundImage: NetworkImage(
"https://randomuser.me/api/portraits/men/47.jpg"),
),
],
),
ListTile(
leading: Icon(Icons.home),
title: Text("Home"),
onTap: () {},
),
ListTile(
leading: Icon(Icons.account_box),
title: Text("About"),
onTap: () {},
),
ListTile(
leading: Icon(Icons.grid_3x3_outlined),
title: Text("Products"),
onTap: () {},
),
ListTile(
leading: Icon(Icons.contact_mail),
title: Text("Contact"),
onTap: () {},
)
],
),
),
);
}
In a Flutter drawer, you can also add a user profile with a name, email. for that you need to use UserAccountsDrawerHeader(). It requires few properties like name, email, profile image. if you want you can pass other account images also. The output of the above example looks like this
Documentation: