'Custom Dropdown Button and MenuItems Flutter

I am trying to build my own drop down button with separated and condensed menu items, like the image below:

here's the code I have tried so far, I got the drop down width to match the container but the items can't be customized so far and always the height starts from above the button and is not occupying the width of the container:

body: Container(
    margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
    child: Container(
      width: double.infinity,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10.0)),
          border: Border.all(color: Colors.brown, width: 1.0)),
      padding: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
      child: DropdownButtonHideUnderline(
        child: ButtonTheme(
          alignedDropdown: true,
          child: DropdownButton(
            isExpanded: true,
            isDense: true,
            value: selection,
            icon: Icon(
              Icons.arrow_drop_down,
              color: Colors.brown,
            ),
            iconSize: 40,
            underline: Container(
              height: 1,
              color: Colors.transparent,
            ),
            onChanged: (String val) => setState(() => selection = val),
            items: settingsOptions.map((option) {
              return DropdownMenuItem(
                value: option,
                child: Text(option),
              );
            }).toList(),
          ),
        ),
      )
    ),
  ),

This is the output from the code:

How do I customize the items width, height and add dividers like in the first image? Thanks

Solution 1:^[1]

This is an example modify as you like !

DropdownButton(
        isExpanded: true,
        isDense: true,
        value: selection,
        icon: Icon(
          Icons.arrow_drop_down,
          color: Colors.brown,
        ),
        iconSize: 40,
        underline: Container(
          height: 1,
          color: Colors.transparent,
        ),
        onChanged: (String val) => setState(() => selection = val),
        items: sampleList.map((option) {
          return DropdownMenuItem(
            value: option,
            child: Container(
              width:double.infinity,
              alignment:Alignment.centerLeft,
              padding: const EdgeInsets.fromLTRB(0,8.0,0,6.0),
              child:Text(option),
              decoration:BoxDecoration(
              border:Border(top:BorderSide(color:Colors.grey,width:1))
              )
            ),
          );
        }).toList(),
        selectedItemBuilder:(con){
              return sampleList.map((m){
                return Text(m,);
              }).toList();
            }
      )

Solution 2:^[2]

I came across a flutter Library called dropdown_below in pub.dev. It has additional methods that can allow you customize dropdownMenuItem to your preferred layout.

DropdownBelow(
                    value: category,
                    // isDense: true,
                    itemWidth: MediaQuery.of(context).size.width * 0.92,
                    itemTextstyle: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w400,
                        color: Colors.black),
                    boxTextstyle: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.w400,
                        color: Colors.grey.shade600),
                    boxPadding: EdgeInsets.fromLTRB(13, 12, 0, 12),
                    boxWidth: MediaQuery.of(context).size.width,
                    boxHeight: 60,
                    hint: Text('choose video'),
                    items: video.data.value.videos
                        .map((e) => DropdownMenuItem(
                              onTap: () => e.title,
                              value: e.title ?? category,
                              child: Container(
                                width: double.infinity,
                                decoration: BoxDecoration(),
                                child: Padding(
                                  padding: const EdgeInsets.all(8.0),
                                  child: Text(
                                    e.title ?? '$category',
                                    overflow: TextOverflow.ellipsis,
                                  ),
                                ),
                              ),
                            ))
                        .toList(),
                    onChanged: (video) {
                      context.read(videoProvider).cateroryOnChange(video);
                    },
                  ),

Library Link: https://pub.dev/packages/dropdown_below

Solution 3:^[3]

The problem with the DropdownButton is that the menu will open randomly based on the selected index and other things. Also, You can't edit its code by just trying to pass offset as the logic code of the paint work based on that and trying to hardcode the selectedItemOffset to a value won't work perfectly fine.

So use DropDownButton2 , which is built just over this .

Package: DropDownButton2

Credits: Ahmed Elsayed

For reference: Refer this link