DropdownButtonFormField in flutter isn't centered when using icon, and when using suffixIcon in its InputDecoration, it won't be pressable

DropdownButtonFormField in flutter isn't centered when using icon, and when using suffixIcon in its InputDecoration, it won't be pressable. here's my code:

 Container(
      height: 56,
      decoration: new BoxDecoration(
          color: widget.val == null ? AppColors.INPUT_COLOR : null,
          borderRadius: BorderRadius.circular(10.0)),
      child: DropdownButtonFormField(
        onChanged: widget.onChanged,
        iconSize: 24,
        items: widget.items,
        icon: Container(),
        value: widget.val,
        decoration: InputDecoration(
            suffixIcon: Icon(
              Icons.arrow_drop_down,
            ),
            // focusColor: Colors.transparent,
            focusedBorder: AppBorders.focusedBorder,
            enabledBorder: widget.val == null
                ? AppBorders.noBorder
                : AppBorders.defaultBorder,
            disabledBorder: AppBorders.defaultBorder,
            border: widget.val == null
                ? AppBorders.noBorder
                : AppBorders.defaultBorder,
            contentPadding: EdgeInsets.symmetric(vertical: 16, horizontal: 16),
            labelText: widget.label,
            labelStyle: TextStyle(
              color: AppColors.MAIN_TEXT.withOpacity(0.5),
            )),
      ),
    );

When i use suffixIcon in input decoration, the dropdown won't open when i press on the icon. Furthermore, if I use icon of dropdownButtonFormField like this:

Container(
      height: 56,
      decoration: new BoxDecoration(
          color: widget.val == null ? AppColors.INPUT_COLOR : null,
          borderRadius: BorderRadius.circular(10.0)),
      child: DropdownButtonFormField(
        onChanged: widget.onChanged,
        iconSize: 24,
        items: widget.items,
        value: widget.val,
        decoration: InputDecoration(
            // focusColor: Colors.transparent,
            focusedBorder: AppBorders.focusedBorder,
            enabledBorder: widget.val == null
                ? AppBorders.noBorder
                : AppBorders.defaultBorder,
            disabledBorder: AppBorders.defaultBorder,
            border: widget.val == null
                ? AppBorders.noBorder
                : AppBorders.defaultBorder,
            contentPadding: EdgeInsets.symmetric(vertical: 16, horizontal: 16),
            labelText: widget.label,
            labelStyle: TextStyle(
              color: AppColors.MAIN_TEXT.withOpacity(0.5),
            )),
      ),
    );

the icon will not be centered. To be more specific, this is how i need it to look like:

but instead, it looks like this:

As you can see, when there is no item selected for the dropdown, the icon is not aligned with the text