How to remove the hamburger button from a flutter drawer?

Question

I've seem examples on how to set up a drawer in Flutter (return new Scaffold(drawer: new Drawer( ... ) or return new Scaffold(endDrawer: new Drawer( ... )).

How can I remove the hamburger button at the top (so that you can only get the drawer through sliding from the side (or through a custom button in the app - that I know how to do))?

Aravind Vemula · Answer 1 · 2023-08-03T10:56:49.657

48

In AppBar you need to do the following to hide default rendering hamburger icon

AppBar(
  automaticallyImplyLeading: false, // this will hide Drawer hamburger icon
  actions: <Widget>[Container()],   // this will hide endDrawer hamburger icon
  ... // other props
),

and In SilverAppBar do the following to hide default rendering hamburger icon

SliverAppBar(
  automaticallyImplyLeading: false, // this will hide Drawer hamburger icon
  actions: <Widget>[Container()],   // this will hide endDrawer hamburger icon
  ... // other props
}

I hope this will help...

edited Aug 03 '23 at 10:56

answered Jan 20 '19 at 05:30

Aravind Vemula

1,571
17
22

There is a typo in SliverAppBar. It is sliver, not silver – Oleg Yablokov Aug 03 '23 at 07:52

Shady Aziza · Accepted Answer · 2018-02-28T18:30:26.333

25

Just set the leading property in your AppBar to an empty Container

appBar: new AppBar(
          leading: new Container(),
    ....

And in order to remove endDrawer (for RtL). It is placed where the action property is, so also just add an empty Container as a single child of the action property

appBar: new AppBar(
        actions: <Widget>[
          new Container(),
        ],
.....

edited Feb 28 '18 at 18:30

answered Feb 28 '18 at 16:49

Shady Aziza

50,824
20
115
113

That removes the left-hand button. How should I remove the right-hand button? – Charles Shiller Feb 28 '18 at 18:26
Override the action property, check the answer. – Shady Aziza Feb 28 '18 at 18:30
1

After setting new Container() to leading it still occupies some space (empty box). As the result, there will be a gap before 'title'. To remove it, see the answer below. – Alexey Apr 03 '18 at 07:08

score 14 · Answer 3 · answered Mar 02 '18 at 21:07

14

Use the https://docs.flutter.io/flutter/material/AppBar/automaticallyImplyLeading.html property on the AppBar

answered Mar 02 '18 at 21:07

xster

6,269
9
55
60

score 7 · Answer 4 · answered Sep 19 '18 at 11:05

7

For the normal drawer you should set https://docs.flutter.io/flutter/material/AppBar/automaticallyImplyLeading.html to false.

For the end drawer you should do the following:

actions: [Container()]

answered Sep 19 '18 at 11:05

J. van Dijk

395
3
6

1

Thanks! Setting `automaticallyImplyLeading` to false worked for me on a `SliverAppBar`. – rjr-apps Jan 12 '19 at 23:31

score 1 · Answer 5 · answered Jun 01 '21 at 15:49

If you have stacked the AppBar() widget over the top of the SliverAppBar() you need to do automaticallyImplyLeading: false in SliverAppBar() widget only.

This will remove the Hamburger icon from the AppBar.

By the way, why it is happening as such? Could someone tell me?

Am not getting it....

score 1 · Answer 6 · answered Jan 21 '22 at 05:15

1

Simply add this to your Appbar automaticallyImplyLeading: false,

answered Jan 21 '22 at 05:15

Anand

4,355
2
35
45

How to remove the hamburger button from a flutter drawer?

6 Answers6

Linked