How to place Drawer widget on the right

Question

How to place Drawer widget on the right. Also is possible to place two Drawer widget in a single page one either side of the appbar

Widget build(BuildContext context){
 return Scaffold(
  drawer: Drawer(
    child: ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.shopping_cart),
          title: Text('Checkout'),
          onTap: (){
            Navigator.pushNamed(context, '/home');
          },
        ),
        ListTile(
          leading: Icon(Icons.report),
          title: Text('Transactions'),
          onTap: (){
            Navigator.pushNamed(context, '/transactionsList');
          },
        ),
      ]
    )
  ),
  body: SingleChildScrollView(
    child: Column(
      children : [
        _buildOrderHeader(),
        _buildOrderDetails(context),
      ]
    )
  )
);

}'

Thanks for the support. It worked . Is it possible to change the drawer icon? — KURRU HEM, Nov 14 '18 at 13:13
I need to change the icon of the endDrawer. Also Im unable to open endDrawer — KURRU HEM, Nov 14 '18 at 13:53

score 166 · Accepted Answer · edited May 27 '21 at 13:52

166

By using endDrawer: ... instead or in addition to drawer: ... to set a drawer, like this:

Scaffold(
  endDrawer: Drawer(...),
  // ...
)

To open it programmatically, use

Scaffold.of(context).openEndDrawer(); //This might have been updated by flutter team since the last edit

See also https://docs.flutter.io/flutter/material/Scaffold/endDrawer.html

edited May 27 '21 at 13:52

Sid

378
1
13

answered Nov 14 '18 at 12:53

Günter Zöchbauer

623,577
216
2,003
1,567

Thanks for the answer. I need to open the endDrawer when the appbar Action button is taped – KURRU HEM Nov 14 '18 at 13:55
15

`Scaffold.of(context).openEndDrawer()` https://docs.flutter.io/flutter/material/ScaffoldState/openEndDrawer.html – Günter Zöchbauer Nov 14 '18 at 14:33
@GünterZöchbauer Finally, able to get past my hero, [ranking #2](https://stackoverflow.com/tags/flutter/topusers) in Flutter. – CopsOnRoad May 06 '21 at 15:41
`drawer` widget in flutter, default opens from left-to-right and the `endDrawer` by default opens from right-to-left. – Si 12 Jul 31 '22 at 11:42

score 10 · Answer 2 · edited Apr 04 '23 at 06:57

To open navigation drawer from right side with Dart Null Safety, You should use endDrawer(). There is two drawer arguments available in flutter.

Drawer (left side)
endDrawer (Right side) you can see the example for endDrawer.

To open endDrawer on Button click.

_scaffoldKey.currentState!.openEndDrawer();

Create Global Key

final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();

inside Build()

Scaffold(
  backgroundColor: backgroundcolor_cust,
  key: _scaffoldKey,
  endDrawer: Drawer(
    elevation: 16.0,
    child: leftDrawerMenu(context, user_phone, cart_count),
  ),
)

score 8 · Answer 3 · edited Apr 04 '23 at 06:54

8

endDrawer: Drawer(
  child: Center(
    child: Column(
      children: const [
        Text('End Drawer'),
      ],
    ),
  ),
),

edited Apr 04 '23 at 06:54

Pedro Luz

2,694
4
44
54

answered Oct 16 '20 at 05:07

Osama Sandhu

411
6
11

score -1 · Answer 4 · edited Nov 23 '21 at 11:43

If you want to keep the button on right and the drawer in the left, then add the hamburger button inside a container, so that hamburger button will be on the right side and the navigation drawer remains in the left side. (not recommended)

new Container(
  alignment: Alignment.topRight,
  margin: EdgeInsets.only(top: 20.0, right: 10.0),
  child: IconButton(
    icon: Icon(
      Icons.menu,
      size: 24,
      color: Colors.white,
    ),
    onPressed: () => scaffoldKey.currentState.openDrawer(),
  ),
)

How to place Drawer widget on the right

4 Answers4

Linked