Different kind of dropdown menu in Flutter

Question

I have been trying to make a dropdown widget like this in Flutter. I tried normal dropdown, overlays with text field, and menu. Any tips?

Default

Focused

Answer 1

You can probably accomplish what you are looking for, by using the ExpansionPanelList widget:

https://api.flutter.dev/flutter/material/ExpansionPanelList-class.html

Answer 2

Try below Code hope its helpful to you I have tried same as your requirement Use ExpansionPanel Widget for that

Declare bool variables for true or false statement

  bool? isExpanded;
  bool _expanded = false;

Declare your List Widget that display you in dropdown

  List<String> data = [
    "Administrative Assistance",
    "Autonomous Driving",
    "Brand",
    "Business Intelligence",
    "Customer Service",
  ];

Declare your Widget

Column(
      children: [
        Container(
          margin: EdgeInsets.all(20),
          decoration: BoxDecoration(
            border: Border.all(color: Colors.black),
          ),
          child: ExpansionPanelList(
            animationDuration: Duration(
                milliseconds: 1000), //change duration on your need here
            children: [
              ExpansionPanel(
                headerBuilder: (context, isExpanded) {
                  return ListTile(
                    title: Text(
                      'Department',
                      style: TextStyle(color: Colors.black),
                    ),
                  );
                },
                body: Column(
                  children: [
                    Divider(
                      height: 1,
                      color: Colors.green,
                    ),
                    ListView.separated(
                        shrinkWrap: true,
                        itemBuilder: (BuildContext context, int index) {
                          return ListTile(
                            title: Text(
                              data[index],
                            ),
                          );
                        },
                        separatorBuilder: (context, index) => Divider(
                              height: 1,
                              color: Colors.black,
                            ),
                        itemCount: data.length),
                  ],
                ),
                isExpanded: _expanded,
                canTapOnHeader: true,
              ),
            ],
            dividerColor: Colors.grey,
            expansionCallback: (panelIndex, isExpanded) {
              _expanded = !_expanded;
              setState(() {});
            },
          ),
        ),
      ],
    ),

Your Result screen before tap ->

Your Result screen after tap ->