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
5,114 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
6,445 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
298 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
7,475 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
25,712 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
993 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
710 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
11,629 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
1,841 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