How to open drawer with iconbutton in Flutter? - flutter

Question

Well, I was trying to create my custom appbar but I keep editing my column widget with properties I wanted in my appbar and it worked same as I wanted the appbar(as you can see in image) so I thought I dont need a appbar now. But now I want to implement a drawer which can be access by my iconbutton (which is implemented in top left corner of my widget). Actually drawer is implemented bcoz i can use it with sliding action, but I think its hidden behind my widget! I searched on internet and found some codes but since I dont have deep knowledge of any other programming knowledge so its little hard to understand the syntax for me. How can I access this drawer with my IconButton???
enter image description here
This is my page source code. NOTE: sorry i could not update the upper part of my bcoz i dont know how to format it in stackoverflow so its getting input as text instead of code snippet so I am avoiding it
return Scaffold(
backgroundColor: Colors.white,
drawer: CstmDrawer(),
body: SafeArea(
child: Column(
children: [
Row(
children: [
Container(
height: 150.0,
width: MediaQuery.of(context).size.width * 1.0,
child: Stack(
children: [
Container(
height: 130.0,
width: MediaQuery.of(context).size.width * 1.0,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.vertical(
bottom: Radius.elliptical(
MediaQuery.of(context).size.width, 100.0),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
IconButton(
onPressed: () {
Scaffold.of(context).openDrawer(); //I found this code on internet but it gives error "Scaffold.of() called with a context that does not contain a Scaffold."
},
icon: Icon(Icons.menu),
),
Container(
child: Row(
children: [
IconButton(
onPressed: () {},
icon: Icon(
Icons.notifications_active_outlined)),
IconButton(
onPressed: () {},
icon: Icon(Icons.shopping_cart_outlined)),
],
),
),
],
),
),
Positioned(
bottom: 20.0,
right: MediaQuery.of(context).size.width * 0.07,
child: Container(
height: 40.0,
width: MediaQuery.of(context).size.width * 0.85,
child: Theme(
data: ThemeData(primaryColor: Colors.black),
child: TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
prefixIcon: Icon(Icons.search),
hintText: "Search Here",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
),
),
),
),
),
],
),
),
],
),
],
),
),
);
Drawer source code.
return Drawer(
elevation: 16.0,
child: Column(
children: [
UserAccountsDrawerHeader(
onDetailsPressed: (){},
currentAccountPicture: CircleAvatar(
backgroundColor: Colors.white,
child: IconButton(
onPressed: (){},
tooltip: "Add Photo",
splashColor: Colors.black,
icon: Icon(
Icons.add_a_photo_rounded,
),
),
),
accountName: Text(
"My Name"
),
accountEmail: Text(
"myemail#gmail.com",
),
),
ListTile(
//tileColor: Colors.green,
onTap: (){},
leading: Icon(Icons.person),
hoverColor: Colors.grey,
title: Text("My Account"),
),
Divider(),
ListTile(
onTap: (){},
leading: Icon(Icons.shopping_cart_outlined),
hoverColor: Colors.grey,
title: Text("Cart"),
),
Divider(),
ListTile(
onTap: (){},
leading: Icon(Icons.storefront_sharp),
hoverColor: Colors.grey,
title: Text("Shop"),
),
Divider(),
ListTile(
onTap: (){},
leading: Icon(Icons.location_on_outlined),
hoverColor: Colors.grey,
title: Text("Map"),
),
Divider(
thickness: 2.0,
),
ListTile(
onTap: (){},
leading: Icon(Icons.settings),
hoverColor: Colors.grey,
title: Text("Settings"),
),
Divider(),
ListTile(
onTap: (){},
leading: Icon(Icons.logout),
hoverColor: Colors.grey,
title: Text("Logout"),
),
],
),
);

Answer 1

The issue is that your context does not contains yet the data from your Scaffold, the workaround you can apply would be to use a GlobalKey to refer to your current ScaffoldState:
class MyWidget extends StatelessWidget {
final _scaffoldKey = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
backgroundColor: Colors.white,
drawer: CstmDrawer(),
body: SafeArea(
child: Column(
children: [
Row(
children: [
Container(
height: 150.0,
width: MediaQuery.of(context).size.width * 1.0,
child: Stack(
children: [
Container(
height: 130.0,
width: MediaQuery.of(context).size.width * 1.0,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.vertical(
bottom: Radius.elliptical(
MediaQuery.of(context).size.width, 100.0),
),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
/// Use the _scaffoldKey to call openDrawer()
IconButton(
onPressed: () =>
_scaffoldKey.currentState.openDrawer(),
icon: Icon(Icons.menu),
),
Container(
child: Row(
children: [
IconButton(
onPressed: () {},
icon: Icon(
Icons.notifications_active_outlined)),
IconButton(
onPressed: () {},
icon: Icon(Icons.shopping_cart_outlined)),
],
),
),
],
),
),
Positioned(
bottom: 20.0,
right: MediaQuery.of(context).size.width * 0.07,
child: Container(
height: 40.0,
width: MediaQuery.of(context).size.width * 0.85,
child: Theme(
data: ThemeData(primaryColor: Colors.black),
child: TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
prefixIcon: Icon(Icons.search),
hintText: "Search Here",
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
),
),
),
),
),
),
],
),
),
],
),
],
),
),
);
}
}
Here the solution is to use _scaffoldKey to call openDrawer() so instead of doing Scaffold.of(context).openDrawer() you will do _scaffoldKey.currentState.openDrawer(), and do not forget to assign the key to your Scaffold, by doing key: _scaffoldKey.

Answer 2

You can use this I guess!
IconButton(
icon: Icon(Icons.menu),
onPressed: () => Scaffold.of(context).openDrawer()
)