Create a Sidebar Menu in Flutter 2022

The sidebar menu is probably a “must-have” when you create any flutter applications. It helps you to organize your action links in the app. There are many reasons why would you create a sidebar in your app, maybe for app navigation, or for user profile. In our example, we going to create a menu for a simple user profile.

1. Create a file ‘NavBar.dart’

The first step that we want to do is create a separate file because we want to have everything organized in our project. To do so, just create a NavBar.dart file inside your lib folder.

Note: If you create any projects in Flutter, it’s probably a good idea to create a completely separate folder like Includes or Addons, and put all your custom files (widgets) there.

2. Create a NavBar class and link it to Scaffold()

Now we are going to create create a NavBar class inside NavBar.dart. Then, we are going to link it to our main.dart.

The first step inside our blank file we need to import the material design.

import 'package:flutter/material.dart';

Next, we need to create a class NavBar and extend StatelessWidget. Inside our class, we will override build Widget and return Drawer().

import 'package:flutter/material.dart';

class NavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      

    );
  }
}

Awesome! Next, depends on your project and where you want to create a flutter sidebar menu, place the code below inside your dart file (e.g main.dart).

import 'package:flutter/material.dart';
import 'NavBar.dart';

......

return Scaffold(
      drawer: NavBar(),
      ..
);

This is what we should have when we press on ‘menu’ icon that appears after we initialize NavBar():

Okay, so far so good. Not enough content, but we are getting there!

3. Create a sidebar menu widget

In this step, we are going to create a navbar menu. I hope you know the purpose of the ListView() widget, if not, check the official article. You can understand why we are going to use it. But in a short answer, we want to create a ‘row of widgets’ where we will put all our headers, buttons etc. inside our sidebar menu.

Moving forward, let’s create a listView() child inside NavBar.dart file.

import 'package:flutter/material.dart';

class NavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [],
      ),
    );
  }
}

Great! Now, what I’m going to use inside a children’s property is UserAccountsDrawerHeader(). This will allow us to create a user account header where we can display:

• Account name
• Account email
• Account avatar

Note: This should be used only if you are making a User Profile navigation bar, like in our case. If you do not need this, use DrawerHeader() instead.

import 'package:flutter/material.dart';

class NavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          UserAccountsDrawerHeader(
            accountName: Text('Oflutter.com'),
            accountEmail: Text('example@gmail.com'),
            currentAccountPicture: CircleAvatar(
              child: ClipOval(
                child: Image.network(
                  'https://oflutter.com/wp-content/uploads/2021/02/girl-profile.png',
                  fit: BoxFit.cover,
                  width: 90,
                  height: 90,
                ),
              ),
            ),
            decoration: BoxDecoration(
              color: Colors.blue,
              image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage('https://oflutter.com/wp-content/uploads/2021/02/profile-bg3.jpg')
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Here is some tips:

accountName is a user nickname.
accountEmail is a user email.
currentAccountPicture is an avatar picture.
decoration is our background image.

Usually, when a user logged in, you should display their info. So this is why we used accountName and accountEmail (it’s also mandatory). currentAccountPicture is an avatar image that you can display. For example, user can show their profile picture. In our case, decoration played a background image role for our navbar.

This is our result:

This looks much better now, but not enough!

If you can see, there are white spaces on top of the Profile Header. By default, ListView() widget uses padding. In our situation, this looks not very professional, so we can remove padding by adding padding: EdgeInsets.zero inside ListView() widget.

import 'package:flutter/material.dart';

class NavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        // Remove padding
        padding: EdgeInsets.zero,
        children: [
          UserAccountsDrawerHeader(
            accountName: Text('Oflutter.com'),
            accountEmail: Text('example@gmail.com'),
            currentAccountPicture: CircleAvatar(
              child: ClipOval(
                child: Image.network(
                  'https://oflutter.com/wp-content/uploads/2021/02/girl-profile.png',
                  fit: BoxFit.cover,
                  width: 90,
                  height: 90,
                ),
              ),
            ),
            decoration: BoxDecoration(
              color: Colors.blue,
              image: DecorationImage(
                fit: BoxFit.fill,
                image: NetworkImage('https://oflutter.com/wp-content/uploads/2021/02/profile-bg3.jpg')
              ),
            ),
          ),
        ],
      ),
    );
  }
}

This is our result when we removed padding from ListView():

Fantastic! Now we are ready to build navigation links inside our sidebar.

Depend on what application you are making, you might have different links. This is just for educational purposes. Our list of links will be consist of:

• Favorites
• Friends
• Share
• Requests
• Settings
• Policies
• Exit

To create these links, we are going to use ListTile() widget. This is a very cool widget since you can use a leading, title, and onTap event. Also, after Requests and Policies, we are going to display a horizontal line using Divider() widget. This will ‘break’ our navigational links in flutter into different sections.

import 'package:flutter/material.dart';

class NavBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        // Remove padding
        padding: EdgeInsets.zero,
        children: [
          UserAccountsDrawerHeader(
            accountName: Text('Oflutter.com'),
            accountEmail: Text('example@gmail.com'),
            currentAccountPicture: CircleAvatar(
              child: ClipOval(
                child: Image.network(
                  'https://oflutter.com/wp-content/uploads/2021/02/girl-profile.png',
                  fit: BoxFit.cover,
                  width: 90,
                  height: 90,
                ),
              ),
            ),
            decoration: BoxDecoration(
              color: Colors.blue,
              image: DecorationImage(
                  fit: BoxFit.fill,
                  image: NetworkImage(
                      'https://oflutter.com/wp-content/uploads/2021/02/profile-bg3.jpg')),
            ),
          ),
          ListTile(
            leading: Icon(Icons.favorite),
            title: Text('Favorites'),
            onTap: () => null,
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text('Friends'),
            onTap: () => null,
          ),
          ListTile(
            leading: Icon(Icons.share),
            title: Text('Share'),
            onTap: () => null,
          ),
          ListTile(
            leading: Icon(Icons.notifications),
            title: Text('Request'),
          ),
          Divider(),
          ListTile(
            leading: Icon(Icons.settings),
            title: Text('Settings'),
            onTap: () => null,
          ),
          ListTile(
            leading: Icon(Icons.description),
            title: Text('Policies'),
            onTap: () => null,
          ),
          Divider(),
          ListTile(
            title: Text('Exit'),
            leading: Icon(Icons.exit_to_app),
            onTap: () => null,
          ),
        ],
      ),
    );
  }
}

Great! Now you can handle any ‘on click’ event using the onTap function, change icons using leading, and title using title widget. 

This is a result we are having right now:

This looks very professional now! Basically, you can stop here if you think it’s enough for you. However, I want to add an extra ‘notification’ to the Request. To do so, we can create a trailing widget inside ListTile widget with the code below:

ListTile(
  leading: Icon(Icons.notifications),
  title: Text('Request'),
  onTap: () => null,
  trailing: ClipOval(
    child: Container(
      color: Colors.red,
      width: 20,
      height: 20,
      child: Center(
        child: Text(
          '8',
          style: TextStyle(
            color: Colors.white,
            fontSize: 12,
          ),
        ),
      ),
    ),
  ),
),

And this is our final Flutter Navigation Sidebar Menu:

Thanks for reading! Please let me know in the comments if you have any questions!

---

Download Source Code