CODEWITHSUNDEEP
dartflutterflutter-layout
Ammy Kang
Ammy Kang

Reputation: 12602

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

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.

enter image description here

Upvotes: 23

Views: 27997

Answers (3)

Faheem Ahmad
Faheem Ahmad

Reputation: 173

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,
              );
            },
          ),
        ],
      ),

enter image description here enter image description here

Upvotes: 1

شير دل
شير دل

Reputation: 21

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

    ],

Upvotes: 2

leodriesch
leodriesch

Reputation: 5780

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")],
      )
    ],
  ),
);

Upvotes: 64

Related Questions