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, 2023 in Flutter by Ashwini
• 5,430 points
6,222 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, 2023 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, 2023 in Flutter by vinayak
7,918 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, 2023 in Flutter by vani
427 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, 2023 in Flutter by Tej
8,680 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, 2023 in Android by vishalini
30,628 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, 2023 in Android by vishalini
1,273 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, 2023 in Flutter by Tanishqa
• 1,170 points
832 views
0 votes
1 answer
0 votes
2 answers

How to create a circle icon button in Flutter?

To create something similar to a FloatingActionButton, ...READ MORE

answered Aug 23, 2023 in Flutter by anonymous
• 140 points
13,856 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, 2023 in Flutter by vishalini
2,169 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