Custom Outline Dropdown in Flutter

Question

I want to recreate this drop-down design in flutter, but I'm finding it hard to format a DropDown to look like this.

ack.imgur.com/otED3.png

Answer 1

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 SubTitle List Widget that display you in dropdown

List<String> subTitle = [
    "First Bank of Nig.4567897687",
    "First Bank of Nig.4567897687",
    "First Bank of Nig.4567897687",
    "First Bank of Nig.4567897687",
    "First Bank of Nig.4567897687",
  ];

Your Widget:

Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        margin: EdgeInsets.all(10),
        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(
                    'Select Benificiary',
                    style: TextStyle(color: Colors.black),
                  ),
                );
              },
              body: Column(
                children: [
                  Divider(
                    height: 1,
                    color: Colors.green,
                  ),
                  ListView.builder(
                    shrinkWrap: true,
                    itemBuilder: (BuildContext context, int index) {
                      return ListTile(
                        leading: CircleAvatar(
                          child: Text(
                            data[index][0],
                          ),
                        ),
                        title: Text(
                          data[index],
                        ),
                        subtitle: Text(
                          subTitle[index],
                        ),
                      );
                    },
                    itemCount: data.length,
                  ),
                ],
              ),
              isExpanded: expanded,
              canTapOnHeader: true,
            ),
          ],
          dividerColor: Colors.grey,
          expansionCallback: (panelIndex, isExpanded) {
            expanded = !expanded;
            setState(() {});
          },
        ),
      ),
    ],
  ),

Your Result Screen->

Your Dropdown/ExpansionList->

You can refer my same answer here