How to place Drawer widget on the right
FlutterFlutter Problem Overview
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 Solutions
Solution 1 - Flutter
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
Solution 2 - Flutter
endDrawer:Drawer(child:Center(child:Columun( children: <Widget>[
Text('End Drawer) ],
),))
Solution 3 - Flutter
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),
),
Solution 4 - Flutter
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(),
),
)