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.

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
        ),
      ]
    ),
  );
}

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

import '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.