Flutter how to add a Expandable menu item inside navigation drawer? - dart

Question

I want to add expandable menu to drawer items of flutter. How can I achieve this functionality in flutter. Please just point me in the correct direction if there is any example or blog.

Answer 1

You have to pass the drawers child property a ListView, and in that ListView you can then use an ExpansionTile. That would look something like this:
Drawer(
child: ListView(
children: <Widget>[
ExpansionTile(
title: Text("Expansion Title"),
children: <Widget>[Text("children 1"), Text("children 2")],
)
],
),
);

Answer 2

You have to pass the drawers child property a ListView, and in that ListView you can then use an ExpansionTile. That would look something like this:
ExpansionTile(
title: Text('Categories'),
leading: Icon(Icons.view_list),
children: <Widget>[
GestureDetector(
child: SizedBox(
width: 250,
height: 35,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Shalwar kameez"))))),
onTap: (){},
),
SizedBox(height: 7,),
GestureDetector(
child: SizedBox(
width: 250,
height: 35,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Sherwani."))))),
onTap: (){},),
SizedBox(height: 7,),
GestureDetector(
child: SizedBox(
width: 250,
height: 35,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Sindhi Ajrak or Cap."))))),
onTap: (){},),
SizedBox(height: 7,),
GestureDetector(
child: SizedBox(
width:250,
height: 40,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Punjabi kurta and tehmat."))))),
onTap: (){},),
SizedBox(height: 7,),
GestureDetector(
child: SizedBox(
width: 250,
height: 35,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Saraiki Turban"))))),
onTap: (){},),
SizedBox(height: 7,),
GestureDetector(
child: SizedBox(
width: 250,
height: 35,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Saraiki Kurta."))))),
onTap: (){},),
SizedBox(height: 7,),
GestureDetector(
child: SizedBox(
width: 250,
height: 35,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Peshawari Turban."))))),
onTap: (){},),
SizedBox(height: 7,),
GestureDetector(
child: SizedBox(
width: 250,
height: 35,
child: Container(
decoration: BoxDecoration(
color: Colors.black26,
borderRadius: BorderRadius.circular(15),
),
child: Card(child: Center(child: Text("Lehenga Choli"))))),
onTap: (){},),
],

Answer 3

My solution:
ExpansionTile(
leading: Icon(
Icons.settings,
color: headingcolor,
),
trailing: Icon(
Icons.arrow_forward_ios_rounded,
size: 10.0,
color: defaultcolor,
),
title: Text(
"Settings",
style: TextStyle(
color: headingcolor,
),
),
children: <Widget>[
DrawerListTile(
title: "Terms",
svgSrc: Icon(
Icons.rule_sharp,
color: headingcolor,
),
press: () {
Get.offAll(
() => SettingsScreenMainTerms(),
duration: Duration(milliseconds: 400), //
transition: Transition.zoom,
);
},
),
DrawerListTile(
title: "Notifications",
svgSrc: Icon(
Icons.edit_notifications_rounded,
color: headingcolor,
),
press: () {
Get.offAll(
() => SettingsScreenMainNotifications(),
duration: Duration(milliseconds: 400), //
transition: Transition.zoom,
);
},
),
],
),