Flutter DropdownButtonFormField icon doesn't align properly - flutter

Question

Good morning, I am trying to align the DropDown's arrow icon with the hint text but I can't understand why the render engine positions it so far below.
I tried to set the InputDecoration's contentPadding property to EdgeInsets.zero and it seemed to work. However, it ruined the DropDown's focusBorder. Furthermore, I didn't understand what element the padding is attached to.
import 'package:flutter/material.dart';
class Example extends StatefulWidget {
const Example({Key? key}) : super(key: key);
#override
State<Example> createState() => _ExampleState();
}
class _ExampleState extends State<Example> {
#override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.black87,
),
),
width: 135.0,
height: 55.0,
child: _buildField(),
);
}
Widget _buildField() {
return DropdownButtonFormField<String>(
icon: const Icon(
Icons.expand_more,
size: 30.0,
color: Color(0xFF2E2E2E),
),
hint: const Text(
'Status',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w500,
color: Color(0xFFA6A6A6),
),
),
decoration: const InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.transparent,
width: 2.5,
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFFF7321),
width: 2.5,
),
),
),
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
.map<DropdownMenuItem<String>>(
(String item) => DropdownMenuItem(
value: item,
child: Text(item),
),
)
.toList(),
onChanged: (String? value) => print(value),
);
}
}

Answer 1

DropdownButton is a material component as seen on material.io.
This means that Flutter has every single styling hard-coded into the default styling like its defined on this website. It appears that by forcing this widget into a certain height:
return SizedBox(
height: 55.0,
child: Stack(...
you break the prebuilt styling of this widget. I have tested it with a height 50 to demonstrate this:
Here, you can see why setting the height is a bad idea on a Material Component.
Enough talking, what is the solution: Remove the height from SizedBox and any styling that is given by the material component:
return DropdownButtonFormField<String>(
icon: const Icon(
Icons.expand_more,
//size: 30.0,
color: Color(0xFF2E2E2E),
),
hint: const Text(
'Status',
style: TextStyle(
//fontSize: 18.0,
//fontWeight: FontWeight.w500,
color: Color(0xFFA6A6A6),
),
),
Now I know this will break your UI, but this is how Flutter works. Either you completely adopt the Material Design, or you will have a really bad time.

Answer 2

Try this example code I wrote for you.
My code:
DropdownButtonHideUnderline(
child: DropdownButtonFormField<String>(
decoration: const InputDecoration(
border: OutlineInputBorder(),
),
icon: const Icon(
Icons.expand_circle_down, // Custom icon goes here.
),
iconSize: 30, // Icon height goes here.
hint: const Text('Choose item'),
value: _dropDownValue,
items: _dropDownList
.map(
(label) => DropdownMenuItem(
value: label,
child: Text(
label.toString(),
),
),
)
.toList(),
onChanged: (value) {
_dropDownValue = (value ?? _dropDownList[0]);
setState(() {});
},
),
),