How can I increase drawer drag area width in Flutter? - flutter

Question

I have a drawer in my Flutter app, but the default drawer has a very small drag area to show it. How can I increase it?
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
drawerDragStartBehavior: DragStartBehavior.down,
drawer: Drawer(
child: Column(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text(
fullName ?? "",
style: TextStyle(
color: Colors.white,
letterSpacing: 1.0,
fontSize: 16.0,
),
),

Answer 1

You can simply use the drawerEdgeDragWidth property of the Scaffold:
return Scaffold(
appBar: MyAppBar(),
drawer: MyDrawer(),
// Put the width you want here
// In this case the drag area fills the whole screen
drawerEdgeDragWidth: MediaQuery.of(context).size.width,
body: MyBody(),
);

Answer 2

drawer: SizedBox(
width: MediaQuery.of(context).size.width/1.2,
child: Drawer(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SizedBox(
height: 10,
),
ListTile(
dense: true,
title: Text(
"Apply for Leave",
style: drawerFont,
),
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ApplyLeave()));
},
),
ListTile(
dense: true,
title: Text(
"Approval for Bills",
style: drawerFont,
),
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ApplyBill()));
},
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
color: Colors.grey[200],
width: double.infinity,
height: 60,
child: Padding(
padding: const EdgeInsets.only(
left: 28.0, top: 15, bottom: 15),
child: GestureDetector(
onTap: () {
Navigator.pop(context);
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ContactUs()));
},
child: Text(
"Contact Us",
style: drawerFont,
),
),
),
),
],
)
],
),
),
),