Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Conflicting paddings in MenuItemStyleData, DropDownStyleData, and ButtonStyleData #237

Open
FabienDvK opened this issue Feb 9, 2024 · 11 comments
Open

Conflicting paddings in MenuItemStyleData, DropDownStyleData, and ButtonStyleData #237

FabienDvK opened this issue Feb 9, 2024 · 11 comments
Labels
enhancement New feature or request

Comments

@FabienDvK
Copy link

I have some issues with the padding using DropdownButtonFormField2 in Flutter.

Either I set


menuItemStyleData: const MenuItemStyleData(
  padding: EdgeInsets.fromLTRB(30, 0, 0, 0),
),

but then I have too much padding in the FormField when the item is selected (see picture padding:EdgeInsets.fromLTRB(30, 0, 0, 0)),

or I set

menuItemStyleData: const MenuItemStyleData(
  padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
),

but then the items in the dropdown list have no padding (see picture padding:EdgeInsets.fromLTRB(0, 0, 0, 0)).

I would like to have some left padding for the items in the dropdown list and no additional padding in the form field when the item is selected.

Full code:

DropdownButtonFormField2<String>(
  isDense: true,
  isExpanded: true,
  decoration: InputDecoration(
    prefixIcon: const Icon(
      Icons.transgender_outlined,
      color: Colors.white70,
    ),
    //     labelText: "Hello",
    //    labelStyle: TextStyle(color: Colors.yellow.withOpacity(0.9)),
    filled: true,
    floatingLabelBehavior: FloatingLabelBehavior.never,
    fillColor: Colors.white.withOpacity(0.3),
    border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(30.0),
        borderSide: const BorderSide(width: 0, style: BorderStyle.none)),
    errorStyle: TextStyle(fontWeight: FontWeight.bold, fontSize:16, color: Colors.white),
  ),
  hint: const Text(
    'Select Your Gender',
    style: TextStyle(color: Colors.white),
  ),
  items: genderItems
      .map((item) => DropdownMenuItem<String>(
    value: item,
    child: Text(
      item,
      style: TextStyle(
        fontSize: 16,
        color: Colors.white.withOpacity(0.9),
      ),
    ),
  ))
      .toList(),
  autovalidateMode: AutovalidateMode.onUserInteraction,
  validator: (value) {
    if (value == null) {
      return 'Please select gender.';
    }
    return null;
  },
  onChanged: (value) {
    setState(() {
      _selectedGender = value.toString();
    });
  },
  onSaved: (value) {
    _selectedGender = value.toString();
  },
  buttonStyleData: const ButtonStyleData(
    padding: EdgeInsets.fromLTRB(0, 0, 8, 0),
  ),
  iconStyleData: const IconStyleData(
    icon: Icon(
      Icons.arrow_drop_down,
      color: Colors.white,
    ),
    iconSize: 24,
  ),
  dropdownStyleData: DropdownStyleData(
    padding: const EdgeInsets.fromLTRB(0, 0, 0, 0),
    offset: const Offset(0, -20),
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(30),
      color: Colors.white.withOpacity(0.3),
    ),
  ),
  menuItemStyleData: const MenuItemStyleData(
    padding: EdgeInsets.fromLTRB(30, 0, 0, 0),
  ),
),

I tried to combine padding for MenuItemStyleData, DropDownStyleData, and ButtonStyleData, with no luck.

Space No-space
@AhmedLSayed9
Copy link
Owner

AhmedLSayed9 commented Feb 9, 2024 •
edited
Loading

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

@FabienDvK
Copy link
Author

FabienDvK commented Feb 9, 2024 via email

@AhmedLSayed9
Copy link
Owner

Unfortunately, this doesn’t work with the prefixIcon 😕

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

@FabienDvK
Copy link
Author

FabienDvK commented Feb 9, 2024 via email

@AhmedLSayed9
Copy link
Owner

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

@FabienDvK
Copy link
Author

FabienDvK commented Feb 9, 2024 via email

@AhmedLSayed9
Copy link
Owner

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
Copy link
Author

FabienDvK commented Feb 9, 2024 via email

@FabienDvK
Copy link
Author

FabienDvK commented Feb 9, 2024 via email •
edited
Loading

@AhmedLSayed9
Copy link
Owner

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).

@AhmedLSayed9 AhmedLSayed9 added the enhancement New feature or request label Feb 10, 2024
@FabienDvK
Copy link
Author

FabienDvK commented Feb 11, 2024 via email

@AhmedLSayed9 AhmedLSayed9 mentioned this issue May 6, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@AhmedLSayed9 @FabienDvK