Conflicting paddings in MenuItemStyleData, DropDownStyleData, and ButtonStyleData about dropdown_button2

[AhmedLSayed9]

Check the decoration parameter of DropdownButtonFormField2 at Example 7, you've to disable the horizontal padding there.

[FabienDvK]

Unfortunately, this doesn’t work with the prefixIcon 😕

…

On Fri, 9 Feb 2024 at 18:01, Ahmed Elsayed ***@***.***> wrote: Can you check decoration of DropdownButtonFormField2 at Example 7 <https://github.com/AhmedLSayed9/dropdown_button2?tab=readme-ov-file#7-using-dropdownbuttonformfield2-with-form> — Reply to this email directly, view it on GitHub <#237 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXOUCPEI7MBPXPQH2BUM7ALYSZI6BAVCNFSM6AAAAABDBNL4IGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZWGI3TKOBXGQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[AhmedLSayed9]

Unfortunately, this doesn’t work with the prefixIcon 😕

Can you explain more please? Maybe a sample can help.

[FabienDvK]

Do you mean the horizontal padding in menuItemStyleData? menuItemStyleData: const MenuItemStyleData( padding: EdgeInsets.fromLTRB(30, 0, 0, 0) If I do so, the items in the list touch the drop-down box.

…

On Fri, 9 Feb 2024 at 18:33, Ahmed Elsayed ***@***.***> wrote: Unfortunately, this doesn’t work with the prefixIcon 😕 Can you explain more please? Maybe a sample can help. — Reply to this email directly, view it on GitHub <#237 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXOUCPF6I4U4NSNZDGOBKHLYSZMVPAVCNFSM6AAAAABDBNL4IGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZWGMYTQNZVGM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[AhmedLSayed9]

I mean a working sample that has zero horizontal padding at decoration parameter.

[FabienDvK]

In InputDecoration of DropdownbuttonFormField2, there is no horizontal padding in the example I provided above. The issue is that the padding in MenuItemStyleData is passed to ButtonStyleData (when the value is selected and displayed).

…

On Fri, 9 Feb 2024 at 19:38, Ahmed Elsayed ***@***.***> wrote: I mean a working sample that has zero horizontal padding at decoration parameter. — Reply to this email directly, view it on GitHub <#237 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXOUCPBNALXMYY6OWACZVPLYSZUJFAVCNFSM6AAAAABDBNL4IGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZWGQZDGNJSHA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[AhmedLSayed9]

In InputDecoration of DropdownbuttonFormField2, there is no horizontal padding in the example I provided above. The issue is that the padding in MenuItemStyleData is passed to ButtonStyleData (when the value is selected and displayed).
…
On Fri, 9 Feb 2024 at 19:38, Ahmed Elsayed @.> wrote: I mean a working sample that has zero horizontal padding at decoration parameter. — Reply to this email directly, view it on GitHub <#237 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXOUCPBNALXMYY6OWACZVPLYSZUJFAVCNFSM6AAAAABDBNL4IGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZWGQZDGNJSHA . You are receiving this because you authored the thread.Message ID: @.>

Add contentPadding: EdgeInsets.zero to InputDecoration and start from there.

[FabienDvK]

I had already tried this. Again, the issue is that the padding in MenuItemStyleData (necessary to ensure the items are not fully to the right of the drop-down box) is passed to ButtonStyleData and I don’t see how to correct this. So there is always a place where the item(s) is/are misaligned (see pictures).

…

On Fri, 9 Feb 2024 at 20:56, Ahmed Elsayed ***@***.***> wrote: In InputDecoration of DropdownbuttonFormField2, there is no horizontal padding in the example I provided above. The issue is that the padding in MenuItemStyleData is passed to ButtonStyleData (when the value is selected and displayed). … <#m_2463814218918960425_> On Fri, 9 Feb 2024 at 19:38, Ahmed Elsayed *@*.*> wrote: I mean a working sample that has zero horizontal padding at decoration parameter. — Reply to this email directly, view it on GitHub <#237 (comment) <#237 (comment)>>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AXOUCPBNALXMYY6OWACZVPLYSZUJFAVCNFSM6AAAAABDBNL4IGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZWGQZDGNJSHA <https://github.com/notifications/unsubscribe-auth/AXOUCPBNALXMYY6OWACZVPLYSZUJFAVCNFSM6AAAAABDBNL4IGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZWGQZDGNJSHA> . You are receiving this because you authored the thread.Message ID: @.*> Add contentPadding: EdgeInsets.zero to InputDecoration and start from there. — Reply to this email directly, view it on GitHub <#237 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXOUCPEIYMJAA4T43ONYZI3YSZ5OFAVCNFSM6AAAAABDBNL4IGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZWGUZDCMBVGA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[FabienDvK]

So the paddings of the Hint text and the selected value will be different in the Button if there is a non-zero padding for either MenuItemStyleData or DropDownStyleData.

…

I had already tried this. Again, the issue is that the padding in MenuItemStyleData (necessary to ensure the items are not fully to the right of the drop-down box) is passed to ButtonStyleData and I don’t see how to correct this. So there is always a place where the item(s) is/are misaligned (see pictures). On Fri, 9 Feb 2024 at 20:56, Ahmed Elsayed ***@***.***> wrote: > In InputDecoration of DropdownbuttonFormField2, there is no horizontal > padding in the example I provided above. The issue is that the padding in > MenuItemStyleData is passed to ButtonStyleData (when the value is selected > and displayed). > … <#m_-6746341341627049117_m_2463814218918960425_> > On Fri, 9 Feb 2024 at 19:38, Ahmed Elsayed *@*.*> wrote: I mean a > working sample that has zero horizontal padding at decoration parameter. — > Reply to this email directly, view it on GitHub <#237 (comment) > <#237 (comment)>>, > or unsubscribe > https://github.com/notifications/unsubscribe-auth/AXOUCPBNALXMYY6OWACZVPLYSZUJFAVCNFSM6AAAAABDBNL4IGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZWGQZDGNJSHA > <https://github.com/notifications/unsubscribe-auth/AXOUCPBNALXMYY6OWACZVPLYSZUJFAVCNFSM6AAAAABDBNL4IGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZWGQZDGNJSHA> > . You are receiving this because you authored the thread.Message ID: @.*> > > Add contentPadding: EdgeInsets.zero to InputDecoration and start from > there. > > — > Reply to this email directly, view it on GitHub > <#237 (comment)>, > or unsubscribe > <https://github.com/notifications/unsubscribe-auth/AXOUCPEIYMJAA4T43ONYZI3YSZ5OFAVCNFSM6AAAAABDBNL4IGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZWGUZDCMBVGA> > . > You are receiving this because you authored the thread.Message ID: > ***@***.***> >

[AhmedLSayed9]

Alright, when you've null buttonWidth & dropdownWidth, all menu horizontal padding will be added to the button padding so that menu width adapts to max items width with padding properly.

The thing is that the padding will be added to the content of the form field without the prefixIcon. It's the same behavior as Flutter's form fields IIRC.

You have too much padding because the prefix icon has constraints. Updating your code with the following:

prefixIcon: Padding(
  padding: const EdgeInsetsDirectional.only(start: 30),
  child: const Icon(
    Icons.transgender_outlined,
    color: Colors.red,
  ),
),
prefixIconConstraints: const BoxConstraints(),

will align the prefix icon with the menu items properly, but will also include padding of 30 between the prefix and the button content which is expected as discussed above.

It's not a perfect solution i know.
I'm thinking of adding a property to ButtonStyleData to control whether to include menu padding into the button or not (will default to true). When it's set to false, you've to handle the padding at the button on your own and also the menu can't dynamically match button's size when both buttonWidth & dropdownWidth are null (Note to myself: You've to add menu padding to the menu size in that case).

[FabienDvK]

Thanks Ahmed! A good solution was also provided in the link below, but then I loose the Hint text. Is there any way you can help me? Thanks a lot! https://stackoverflow.com/questions/77967415/flutter-dropdownbuttonformfield2-manage-padding

…

On Sat, 10 Feb 2024 at 17:41, Ahmed Elsayed ***@***.***> wrote: Alright, when you've null buttonWidth & dropdownWidth, all menu horizontal padding will be added to the button padding so that menu width adapts to max items width with padding properly. The thing is that the padding will be added to the content of the form field without the prefixIcon. It's the same behavior as Flutter's form fields IIRC. You have too much padding because the prefix icon has constraints. Updating your code with the following: prefixIcon: Padding( padding: const EdgeInsetsDirectional.only(start: 30), child: const Icon( Icons.transgender_outlined, color: Colors.red, ), ), prefixIconConstraints: const BoxConstraints(), will align the prefix icon with the menu items properly, but will also include padding of 30 between the prefix and the button content which is expected as discussed above. It's not a perfect solution i know. I'm thinking of adding a property to ButtonStyleData to control whether to include menu padding into the button or not (will default to true). When it's set to false, you've to handle the padding at the button on your own and also the menu can't dynamically match button's size when both buttonWidth & dropdownWidth are null (Note to myself: You've to add menu padding to the menu size in that case). — Reply to this email directly, view it on GitHub <#237 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXOUCPAJAIVCPLVTYII5NPDYS6PKBAVCNFSM6AAAAABDBNL4IGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMZXGA2TSMJTGY> . You are receiving this because you authored the thread.Message ID: ***@***.***>