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

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: (){},),

    ],