Add padding to DropdownButton

[davidskelly]

Add a padding param to DropdownButton. The current clickable hitbox looks like this when using external padding:

This allows the hitbox to look like this:

Fixes #115793

If you had to change anything in the flutter/tests repo, include a link to the migration guide as per the breaking change policy.

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
• I signed the CLA.
• I listed at least one issue that this PR fixes in the description above.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or this PR is test-exempt.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

[Piinks]

Hey @davidskelly, welcome! Thanks for contributing!
This looks like a bug that should work automatically instead of having the user fix it through a padding parameter. Can you remove the padding parameter and just adding the padding in the widget so the space is correct?

[davidskelly]

Hey @davidskelly, welcome! Thanks for contributing! This looks like a bug that should work automatically instead of having the user fix it through a padding parameter. Can you remove the padding parameter and just adding the padding in the widget so the space is correct?

Hi @Piinks -

I added some sample code to the linked issue - . But what I meant to describe was - In the first image I have a custom Container (that adds the outline) with padding (padding: EdgeInsets.symmetric(horizontal: 20)) around the DropdownButton, but the blue shows the smaller hitbox:

Without the Container padding, it looks like this:

So to get to the padded container with the correct size hitbox, the DropdownButton needs the padding passed in:

[flutter-dashboard]

This pull request executed golden file tests, but it has not been updated in a while (20+ days). Test results from Gold expire after as many days, so this pull request will need to be updated with a fresh commit in order to get results from Gold.

For more guidance, visit Writing a golden file test for package:flutter.

Reviewers: Read the Tree Hygiene page and make sure this patch meets those guidelines before LGTMing.

[Piinks]

Thanks @davidskelly for updating, and sorry this one fell off my radar! Can you take a look at the failing analyzer check here?

[davidskelly]

@Piinks - updated test!

[Piinks]

This allows the hitbox to look like this:

I am still not sure why this cannot be handled automatically in the widget.

What happens if the user provides padding that exceeds the bounds of the box?

[Piinks]

What part of the widget?

How is this different from the user just wrapping the items in padding?

[davidskelly]

What part of the widget?

Maybe "Padding around the dropdown button" would be clearer?

How is this different from the user just wrapping the items in padding?

If an item is wrapped in padding - the LR - it produces an uneven look:

[bdlukaa]

How is this different from the user just wrapping the items in padding?

The popup menu already adds a padding to the box. If items are wrapped in a Padding, it produces a weird effect in the popup (yet, looking good on the button). On the other hand, if no Padding is added, the popup looks good, but the button does not.

I believe that adding the same padding added to the popup menu to the button is a good fix for the issue, which is what this PR does

[Piinks]

This documentation is still lacking some more context from my first comment here. :)

[davidskelly]

Pushed a change to update the documentation.

[Piinks]

Thank you! It isn't actually the padding around the button though, is it? It is inside of the button.
The docs should still also include an explanation of how this is different from just wrapping the button, or the content of the button, in a Padding widget. As well as, how does the padding affect the overall size of the button?

All of the things we have been discussing in this PR make for helpful documentation for developers. :)

[davidskelly]

Added some more detail to the documentation.

[davidskelly]

I am still not sure why this cannot be handled automatically in the widget.

You are suggesting that internally extra padding is just added - say a padding of 10 - instead of being passed as params?

The dropdown without my custom outline looks like this:

If internal padding is added, it would look something like this, which I don't think would be what most developers would want:

What happens if the user provides padding that exceeds the bounds of the box?

The padding would grow the bounds of the box- the widget would just get bigger.

[davidskelly]

@Piinks is there anything else you need from me here?

[Piinks]

LGTM, thank you. This will need a second reviewer, I will seek one out.

[esouthren]

The change LGTM, but I think it's worth mentioning for future readers that the custom Material 3 widget DropDownMenu was created (#116088) which solves problems like this, by adding DropdownMenuThemeData which allows a custom inputDecorationTheme.

I'd highly recommend using that widget over DropdownButton - it also works successfully in Material 2.