How to customize a DropDownButton - flutter

Question

How to customize the appearance of a DropDownButton?
I would like to do a few things to make the drop down looks like a Text Entry:
remove the bottom line inside the yellow box
indent "Use Email" so it left aligns with "Email Address"
make the drop down the same size as the text box (default size)
put the down arrow close to the right hand side of the drop down
add borders
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.yellow[600],
borderRadius: BorderRadius.circular(4),
),
child: DropdownButton(
value: DropDownValue,
icon: const Icon(Icons.keyboard_arrow_down),
items: DropDownItems.map((String DropDownItems) {
return DropdownMenuItem(
value: DropDownItems,
child: Text(DropDownItems),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
DropDownValue = newValue!;
if (DropDownValue == 'Use Email') {
RegisterType = 'Email';
} else {
RegisterType = 'Mobile';
}
});
},
),
),
SizedBox(height: 10),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: RegisterType),
controller: _EmailAddressController,
),

Answer 1

Try this code:
Container(
width: double.infinity,
decoration: BoxDecoration(
color: Colors.yellow[600],
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(4),
),
child: DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
value: DropDownValue,
icon: const Icon(Icons.keyboard_arrow_down),
items: DropDownItems.map((String DropDownItems) {
return DropdownMenuItem(
value: DropDownItems,
child: Text(DropDownItems),
);
}).toList(),
onChanged: (String? newValue) {
setState(() {
DropDownValue = newValue!;
if (DropDownValue == 'Use Email') {
RegisterType = 'Email';
} else {
RegisterType = 'Mobile';
}
});
},
),
),
),
),
SizedBox(height: 10),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(), labelText: RegisterType),
controller: _EmailAddressController,
),