Flutter Drawer and more
There is a very common issue in the flutter drawer which is a problem for beginners. I would like to address that issue and help you with that.
I will start from a basic using drawer in dart i.e adding a drawer to your app. Adding profile option and list tile and at then end fixing the common issue.
What is Drawer? #
The drawer is very common in android and you can also find this on lots of websites (when you open the website on mobile).
Drawer and NavBar is used for Navigation/Routing from one page to another.
| Drawer | NavBar |
|---|---|
| Used on Mobile View | Used on Desktop View |
| It’s hidden by default | It’s visible |
| Used because of less space | Used because there is sufficient space |
Why drawer? #
Sometimes the screen doesn’t have an area for showing the navigation options. In those case drawer and tabs helps us in navigating easily and without disturbing the body content.
Adding drawer to app #
As far as I know, adding a drawer in flutter is the fastest for any developer compared to any other development. In fact, designing is very quick and easy in a flutter.
You can use the drawer with the combination of Scaffold because it has a drawer parament defined. You just have to pass the drawer widget and it’s ready.
Here is sample code
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Drawer Demo'),
),
drawer: Drawer(),
);
}
I know this is just an empty drawer but this empty drawer makes the drawer available on the main screen.
Looking for Flutter Developer
Adding Widgets to the drawer #
Drawer accepts single child which means if you want to provide multiple children then you need to use Column/ List View or something similar.
I prefer the list view because when our list gets bigger or the content of the list view goes out of the screen it adds the scroll functionality. This feature is not available with the column.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Drawer Demo'),
),
drawer: Drawer(
children: <Widget>[
ListTile(
title: Text('Home'),
onTap: () {},
// You can write the navigation code in this block of function,
// So you can navigate to the other page.
),
ListTile(
title: Text('Settings'),
onTap: () {},
// To make the list tile clickable I added empty function block
),
]
),
);
}
Adding Profile Info to the Drawer #
You have seen in lots of apps that there is profile info in the drawer. It shows the name, email/username, and profile picture. You can assume the G-mail app for now.
There is UserAccountsDrawerHeader widget and it’s used for showing user basic information in a drawer. This widget has two required parameters.
- accountName
- accountEmail
there is more parameter and check the docs to learn more. I’ll talk about one optional parameter which is very much important.
- currentAccountPicture
Let’s see the working code.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Drawer Demo'),
),
drawer: Drawer(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('Nitish Kumar'),
accountEmail: Text('demo@gmail.com'),
currentAccountPicture: FlutterLogo(
colors: Colors.red,
),
),
ListTile(
title: Text('Home'),
onTap: () {},
// You can write the navigation code in this block of function,
// So you can navigate to the other page.
),
ListTile(
title: Text('Settings'),
onTap: () {},
// To make the list tile clickable I added empty function block
),
]
),
);
}
Adding Customer Drawer Header #
The above is a very much general-purpose drawer and it will fit in most of the case. We don’t get satisfied with a common solution and we always look for more.
You can try DrawerHeader for that it’s more flexible you can build anything you want from scratch. This widget required one child and you can build it as you want.
This widget doesn’t provide much and you can read whatever this provides.
- Some Height
- Divider at the end of the Drawer
Apart from these two feature, you can assume this as similar to the Container.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Drawer Demo'),
),
drawer: Drawer(
children: <Widget>[
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
FlutterLogo(
size: 80,
),
Text('Name'),
Text('Email'),
],
),
),
ListTile(
title: Text('Home'),
onTap: () {},
// You can write the navigation code in this block of function,
// So you can navigate to the other page.
),
ListTile(
title: Text('Settings'),
onTap: () {},
// To make the list tile clickable I added empty function block
),
]
),
);
}
Full Code #
home.dartimport 'package:flutter/material.dart';
class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Drawer Demo'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
// UserAccountsDrawerHeader(
// accountName: Text('Nitish'),
// accountEmail: Text('demo@demo.com'),
// currentAccountPicture: FlutterLogo(
// colors: Colors.red,
// ),
// ),
DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
FlutterLogo(
size: 80,
),
Text('Name'),
Text('Email'),
],
),
),
ListTile(
title: Text('Home'),
onTap: () {
Navigator.pushNamed(context, '/home');
},
),
ListTile(
title: Text('Cart'),
onTap: () {
Navigator.pushNamed(context, '/cart');
},
),
ListTile(
title: Text('Orders'),
),
ListTile(
title: Text('Settings'),
),
],
),
),
);
}
}
Conclusion #
I hope you learned how to use a drawer in the flutter application and how to show the user profile in the drawer. This is the most common use case it is followed everywhere. This is based on Google Material Design Principles.
If you like my write and it helps you and wants to say something to me. You can write some comment or you can tweet about this. I would love to read your response, I don’t twice if you want to say something.
Tweet this article