Flutter Drawer with Custom Icon
Tags: flutter, dart, beginners, tutorial
Published: 2020-08-15 04:06:30

Hello guys, this blog post is a part of a video series we have started to upload on YouTube.
Flutter News App (Frontend to Backend)

Here is the video:

{% youtube e8BV1euFT7U %}

In this video, we will have a look at how to create a Drawer with a Custom Icon in Flutter.

So before we customize the icon, lets just build the default Drawer.

Now in our `Scafdfold()`, there is a parameter named as `drawer:`

Let's pass the Drawer() widget to this parameter.

```dart
drawer: Drawer(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 30,
              ),
              DrawerHeader(
                child: Container(
                    height: 142,
                    width: MediaQuery.of(context).size.width,
                    child: Image.asset(
                      "assets/images/ten_news.png",
                    )),
                decoration: BoxDecoration(
                  color: Colors.transparent,
                ),
              ),
              SizedBox(
                height: 20,
              ),
              GestureDetector(
                onTap: () {
                  setState(() {
                    currentIndex = 3;
                  });
                  Navigator.of(context).pop();
                },
                child: Text(
                  'Profile',
                  style: TextStyle(
                    fontFamily: 'Avenir',
                    fontSize: 24,
                    fontWeight: FontWeight.w700,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
              SizedBox(
                height: 45,
              ),
              GestureDetector(
                onTap: () {},
                child: Text(
                  'Settings',
                  style: TextStyle(
                    fontFamily: 'Avenir',
                    fontSize: 24,
                    fontWeight: FontWeight.w700,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
              SizedBox(
                height: 45,
              ),
              Text(
                'About',
                style: TextStyle(
                  fontFamily: 'Avenir',
                  fontSize: 24,
                  fontWeight: FontWeight.w700,
                ),
                textAlign: TextAlign.center,
              ),
              SizedBox(
                height: 45,
              ),
              Text(
                'Log Out',
                style: TextStyle(
                  fontFamily: 'Avenir',
                  fontSize: 24,
                  fontWeight: FontWeight.w700,
                ),
                textAlign: TextAlign.center,
              ),
              SizedBox(
                height: 45,
              ),
              Expanded(
                  child: Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  height: 65,
                  width: MediaQuery.of(context).size.width,
                  color: Colors.black,
                  child: Center(
                    child: Text(
                      'v1.0.1',
                      style: TextStyle(
                        fontFamily: 'Avenir',
                        fontSize: 20,
                        color: const Color(0xffffffff),
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ))
            ],
          ),
        ),
```
Now above, inside the `Drawer()` widget, in the child parameter, we have a passed a `Column()`

This is just used for the sake of inserting multiple widgets in my drawer.

There is also a widget named, `DrawerHeader`.
This widget is used for displaying any content on top of the whole drawer. This widget comes with a default divider. We have passed our app logo to it.

###Now where is the drawer?###

In order to see the drawer, we need to also pass the `AppBar()` to our Home Page's `Scaffold()`.

```dart
Scaffold(
   appBar: AppBar()
);
```
After building the current project we can see the default hamburger Icon in our AppBar. Pressing on it our drawer opens.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5ybtsr4riu3cyafe7hy5.jpg)

###How to Exit the Drawer On Press of a Button?###
I order to close the drawer manually i.e on the press of a button, we only need to return the `Navigator.of(context).pop()` to exit the Drawer.

So let's also add a button on our Drawer.

```dart
Material(
                borderRadius: BorderRadius.circular(500),
                child: InkWell(
                  borderRadius: BorderRadius.circular(500),
                  splashColor: Colors.black45,
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.black,
                    child: Icon(Icons.arrow_back, color: Colors.white),
                  ),
                ),
              ),
```
Now on pressing the button the drawer closes.

###How to change the default Hamburger Icon?###

This question had arrived in my mind on the first day I had learned to build a Drawer in Flutter.

Now in order to have a custom Icon, lets remove the default one first.

```dart
 AppBar(
        automaticallyImplyLeading: false,
),
```
`automaticallyImplyLeading` set to `false` would just remove the default icon.

Now let's pass out Icon to either `leading:` or `title:` parameter.

```dart
appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Padding(
          padding: EdgeInsets.symmetric(horizontal: 25),
          child: Builder(
            builder: (context) => IconButton(
              icon: SvgPicture.asset(
                "assets/icons/drawer.svg",
                height: 15,
                width: 34,
              ),
              onPressed: () => Scaffold.of(context).openDrawer(),
            ),
          ),
        ),
        backgroundColor: Colors.white,
        elevation: 0,
        centerTitle: false,
        titleSpacing: 0,
      ),
```
Now in the above code, there are a few importing things:
* `Builder()`: We use a Builder class to pass the context of the Scaffold widget to a particular widget. More Info: https://stackoverflow.com/a/52123080/6484719
* `Scaffold.of(context).openDrawer()`: This is why used the builder widget, to get the current context of the scaffold and then open the drawer.

Finally, our output:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ccdeyewx2snqctkmj2w7.gif)


👨‍💻Source Code: https://github.com/Code-Decoders/ten_news_yt/tree/Part-2--Drawer
{% github github.com/Code-Decoders/ten_news_yt %}

💐Join Our Slack Group: https://bit.ly/JoinSlackCD

✌Subscribe to CodeDecoders: http://bit.ly/CodeDecoders

💮Design Link: https://xd.adobe.com/view/99205dd3-7fe4-44bb-9edd-dd2a75290cbf-cc73/screen/90d0c71c-26b7-44d1-b29d-6578cbd87884

🤝Developed by 
   Maadhav Sharma: 
     🌐 https://maadhav.github.io/
     🐤 https://twitter.com/maadhav_sharma
     📘 https://www.facebook.com/maadhav2001
     📷 https://www.instagram.com/maadhav_sharma/
   Kunal Jain:
     📷 https://www.instagram.com/jainkunal528