InputDecoration in DropdownButtonFormField adds a padding on the right Flutter

0 votes

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.

enter image description here

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)

Apr 6 in Flutter by Ashwini
• 5,390 points
2,235 views

1 answer to this question.

0 votes

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.

answered Apr 6 by seena

Related Questions In Flutter

0 votes
1 answer

Flutter align two items on extremes - one on the left and one on the right

To achieve the desired result of having ...READ MORE

answered Mar 29 in Flutter by vinayak
2,820 views
0 votes
1 answer

Is Flutter/Dart valuable in the professional setting?

Yes, Flutter and Dart are valuable skills ...READ MORE

answered Mar 21 in Flutter by vani
140 views
0 votes
1 answer

How do you change the value inside of a textfield flutter?

To change the value inside a TextField ...READ MORE

answered Mar 26 in Flutter by Tej
2,980 views
0 votes
1 answer

Create a rounded button / button with border-radius in Flutter

To create a rounded button with border-radius ...READ MORE

answered Mar 1 in Android by vishalini
10,609 views
0 votes
1 answer

Flutter - Wrap text on overflow, like insert ellipsis or fade

Container( padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0), ...READ MORE

answered Mar 1 in Android by vishalini
510 views
0 votes
1 answer

Flutter Like Button Animation Not Working After Adding Method

It seems like the issue might be ...READ MORE

answered Apr 12 in Flutter by Tanishqa
• 1,170 points
408 views
0 votes
1 answer
0 votes
1 answer

How to create a circle icon button in Flutter?

To create a circle icon button in ...READ MORE

answered Mar 27 in Flutter by Tanishqa
• 1,170 points
5,169 views
0 votes
1 answer

How to Deserialize a list of objects from json in flutter Ask Question?

To deserialize a list of objects from ...READ MORE

answered Mar 28 in Flutter by vishalini
907 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP