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,380 points
373 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,
  ),
);

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
438 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
106 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
358 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
2,458 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
295 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,000 points
131 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,000 points
1,326 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
230 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