flutter remove DropdownButton left padding - flutter

Question

I've struggled to remove flutter's DropdownButton left padding so it can match the TextField below. Anyone can help?
Here's my code:
DropdownButton<MenuModel>(
itemHeight: itemHeight,
isExpanded: true,
underline: null,
value: currentValue,
hint: Text(placeholder, style: hintStyle),
style: textStyle,
disabledHint: Text(currentValue?.label ?? placeholder, style: textStyle),
onChanged: widget.modalMode ? null : _onChanged,
items: widget.listMenu.map<DropdownMenuItem<MenuModel>>((MenuModel val) {
return DropdownMenuItem<MenuModel>(
child: Text(val.label),
value: val,
);
}).toList(),
)

Answer 1

finally I've found the problem. So it happen because I wrapped the DropdownButton with ButtonTheme(alignedDropdown: true)
ButtonTheme(
alignedDropdown: true, // it's the culprit
child: DropdownButton<MenuModel>(
itemHeight: itemHeight,
isExpanded: true,
underline: null,
value: currentValue,
hint: Text(placeholder, style: hintStyle),
style: textStyle,
disabledHint: Text(currentValue?.label ?? placeholder, style: textStyle),
onChanged: widget.modalMode ? null : _onChanged,
items: widget.listMenu.map<DropdownMenuItem<MenuModel>>((MenuModel val) {
return DropdownMenuItem<MenuModel>(
child: Text(val.label),
value: val,
);
}).toList(),
),
)
Thanks for the help.

Answer 2

Try below code hope its helpful to you. refer Dropdown here. just change my widget to your widgets
Create variable and List of dropdown:
var selectedCategory;
List categoryDropDownList = [
'One',
'Two',
'Three',
'Four',
];
Your Widget:
DropdownButton(
isDense: true,
isExpanded: true,
hint: Text(
'Select Category',
style: TextStyle(
color: Colors.black,
fontSize: 15,
),
textAlign: TextAlign.center,
),
value: selectedCategory,
items: categoryDropDownList.map<DropdownMenuItem<String>>(
(value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value.toString(),
style: TextStyle(
fontSize: 17,
),
),
);
},
).toList(),
onChanged: (var value) {
setState(
() {
selectedCategory = value;
},
);
},
),
Your result Screen->

Answer 3

I have tried to use the same style as you are using and managed to get that done with the following code. I hope that works for you. I am attaching the screenshot as well of the output.
Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
DropdownButton<String>(
itemHeight: 50,
isExpanded: true,
underline: null,
value: dropdownValue,
hint: const Text('Honorific', style: TextStyle(color: Colors.grey)),
icon: const Icon(Icons.arrow_drop_down),
iconSize: 24,
elevation: 16,
style: const TextStyle(color: Colors.deepPurple),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue!;
});
},
items: <String>['Honorific']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
TextFormField(
controller: controller,
validator: (value) {
if (value!.isEmpty || !value.contains('#')) {
return 'Please enter a valid email address';
}
return null;
},
textInputAction: TextInputAction.next,
keyboardType: TextInputType.emailAddress,
),
],
),
),
output