How to place Drawer widget on the right

user_10027753 0
Viewed 40545

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

}'

flutter
4 Answers

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

user_2174080 
  endDrawer:Drawer(child:Center(child:Columun(   children: <Widget>[
          Text('End Drawer)           ],
      ),))
user_141555910

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

  1. Drawer (left side)
  2. 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),
          ),
user_13026480

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(),
  ),
)
user_74181290
Related