InputDecoration in DropdownButtonFormField adds a padding on the right Flutter

Question

Apparently, when I add a preffixIcon to a InputDecoration in my DropdownButtonFormField it adds a right padding that I don't know where it comes from.

My code:

Container(
      height: 50,
      decoration: BoxDecoration(
        color: CustomTheme.white,
        borderRadius: BorderRadius.circular(10),
      ),
      child: DropdownButtonFormField<dynamic>(
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          prefixIcon: icon != null
              ? Padding(
                  padding: const EdgeInsets.all(8),
                  child: Icon(icon, color: CustomTheme.orange),
                )
              : null,
        ),
        isDense: true,
        iconEnabledColor: CustomTheme.orange,
        icon: const Icon(
          Icons.keyboard_arrow_down,
        ),
        isExpanded: true,
        items: items.map<DropdownMenuItem<dynamic>>(
          (dynamic value) {
            return DropdownMenuItem<dynamic>(
              value: value,
              child: Text(
                value.name,
                overflow: TextOverflow.ellipsis,
                style: Theme.of(context).primaryTextTheme.bodySmall!.copyWith(
                      color: CustomTheme.black,
                    ),
              ),
            );
          },
        ).toList(),
        onChanged: onChanged,
        value: dropdownValue,
      ),
    );

As a hot fix, I created a row in order to put the icon as a separate widget outside the DropdownButtonFormField, but I'd like to know if there's a way handle this with the InputDecoration widget (or a reason why this happens)

Answer 1

The right padding you are seeing in your DropdownButtonFormField is due to the default padding added to the prefix icon by the InputDecoration widget. You can control the padding of the prefix icon by setting the contentPadding property of the InputDecoration widget.

To remove the right padding, you can set contentPadding to EdgeInsets.zero. Here's an updated code snippet:

Container(
  height: 50,
  decoration: BoxDecoration(
    color: CustomTheme.white,
    borderRadius: BorderRadius.circular(10),
  ),
  child: DropdownButtonFormField<dynamic>(
    decoration: InputDecoration(
      border: OutlineInputBorder(),
      prefixIcon: icon != null
          ? Icon(icon, color: CustomTheme.orange),
          : null,
      contentPadding: EdgeInsets.zero, // Set contentPadding to zero
    ),
    isDense: true,
    iconEnabledColor: CustomTheme.orange,
    icon: const Icon(
      Icons.keyboard_arrow_down,
    ),
    isExpanded: true,
    items: items.map<DropdownMenuItem<dynamic>>(
      (dynamic value) {
        return DropdownMenuItem<dynamic>(
          value: value,
          child: Text(
            value.name,
            overflow: TextOverflow.ellipsis,
            style: Theme.of(context).primaryTextTheme.bodySmall!.copyWith(
                  color: CustomTheme.black,
                ),
          ),
        );
      },
    ).toList(),
    onChanged: onChanged,
    value: dropdownValue,
  ),
);

To know more, join our Flutter Certification today.