Custom Dropdown Button and MenuItems Flutter

Issue

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

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();
            }
      )

Answered By - Naveen Avidi