Search code examples
flutterdrop-down-menu

How to create multilevel options menu in flutter?


i want to create this ui ( multi level options menu)

in which at at traling part of question we can add image view as well as in options we can add image view.

can any one help me how can i achive this ui. is there any package available for multi level dropdwon menu?

enter image description here


Solution

  • There's widget named ExpansionTile:

    wrap container with InkWell and onTap select unselect option, you can change border color as per state of selection

    [result]1

    ExpansionTile(
                  textColor: Colors.indigo,
                  title: const Text("Question"),
                  children: [
                    ListView.builder(
                      shrinkWrap: true,
                      primary: false,
                      itemCount: 3,
                      itemBuilder: (context, index) {
                        return InkWell(
                          onTap: () {
                            //select code here
                          },
                          child: Container(
                            height: 60,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(15),
                              border: Border.all(
                                width: 2,
                                color: Colors.blue,// take bool for changing active border color like this: isActive ? Colors.blue : Colors.grey
                              ),
                            ),
                            child:  Center(child: Text("$index")),
                          ).paddingAll(10),
                        );
                      },
                    ),
    
                  ],
                ),