How to align label and content while still having a left padding

[lewinpauli]

Is there a parameter that I am missing to make the content align with the label while still having a left padding?

The content padding seems to have a much larger impact on the content than on the label right now.

dropdown_button2 version: 2.3.7

My code:

 DropdownButtonFormField2(
      value: "content1",
      autovalidateMode: AutovalidateMode.always,
      validator: (value) => value == null ? "Please select something" : null,
      isExpanded: false,
      isDense: true,
      buttonStyleData: ButtonStyleData(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
        ),
      ),
      dropdownStyleData: DropdownStyleData(
        padding: EdgeInsets.only(left: 0, right: 0, top: 0, bottom: 0),
        //openInterval: Interval(0, 1), //timing of the dropdown open animation
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
        ),
      ),
      // menuItemStyleData: MenuItemStyleData(
      //   padding: EdgeInsets.only(left: 10, right: 10, top: 0, bottom: 0),
      // ),
      decoration: InputDecoration(
        floatingLabelAlignment: FloatingLabelAlignment.start,
        floatingLabelBehavior: FloatingLabelBehavior.always,
        alignLabelWithHint: false,
        isDense: true,
        contentPadding: const EdgeInsets.only(
            left: 10, right: 0, top: 14, bottom: 14), //padding of label and content

        labelText: "I am a label",
        border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0)),
      ),
      items:
          ["content1", "content2"].map((e) => DropdownMenuItem(value: e, child: Text(e))).toList()),
                            

[lewinpauli]

with menuItemStyleData I can correct the padding a little bit, but I cannot sync it with the label, like with a normal textformfield

[AhmedLSayed9]

Well, To make it auto sync you've to use decoration.contentPadding. but that will not match with the menu padding.

[AhmedLSayed9]

You've to set horizontal padding of menuItemStyleData to zero too, as it has a default value.

[AhmedLSayed9]

To apply the same padding of decoration.contentPadding to the menu items, you can set that padding to your items in items argument and exclude it at selectedItemBuilder argument (as it's already applied using the decoration.contentPadding):

items: genderItems
    .map((item) => DropdownMenuItem<String>(
          value: item,
          child: Padding(
            padding: const EdgeInsets.only(left: 20.0),
            child: Text(item),
          ),
        ))
    .toList(),
selectedItemBuilder: (context) {
  return genderItems.map(
    (item) {
      return Text(item);
    },
  ).toList();
},

[AhmedLSayed9]

I'll leave this open as it might be a good idea to optimize this internally and to prefer using decoration.contentPadding over menuItemStyleData.padding for DropdownButtonFormField2, or maybe both should just work.

[lewinpauli]

Thank you very much for the fast answer and the good explanation

Now it looks/works as expected!!

My corrected dummy code:

  DropdownButtonFormField2(
    value: "content1",
    autovalidateMode: AutovalidateMode.always,
    validator: (value) => value == null ? "Please select something" : null,
    isExpanded: false,
    isDense: true,
    buttonStyleData: ButtonStyleData(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
      ),
    ),
    dropdownStyleData: DropdownStyleData(
      padding: const EdgeInsets.only(left: 0, right: 0, top: 0, bottom: 0),
      //openInterval: Interval(0, 1), //timing of the dropdown open animation
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
      ),
    ),
    menuItemStyleData: const MenuItemStyleData(
      padding: EdgeInsets.only(left: 0, right: 0, top: 0, bottom: 0),
    ),
    decoration: InputDecoration(
      floatingLabelAlignment: FloatingLabelAlignment.start,
      floatingLabelBehavior: FloatingLabelBehavior.always,
      alignLabelWithHint: false,
      isDense: true,
      contentPadding: const EdgeInsets.only(
          left: 15, right: 0, top: 14, bottom: 14), //padding of label and content

      labelText: "I am a label",
      border: OutlineInputBorder(borderRadius: BorderRadius.circular(10.0)),
    ),
    onChanged: (value) => print(value),
    //items: ["content1", "content2"].map((e) => DropdownMenuItem(value: e, child: Text(e))).toList(),
    items: ["content1", "content2"]
        .map((item) => DropdownMenuItem<String>(
              value: item,
              child: Padding(
                padding: const EdgeInsets.only(left: 15.0),
                child: Text(item),
              ),
            ))
        .toList(),
    selectedItemBuilder: (context) {
      return ["content1", "content2"].map(
        (item) {
          return Text(item);
        },
      ).toList();
    },
  ),

[adnan-nazir]

is there any update on this?
Its upto 6 months still I can't remove extra padding from the Placeholder.

[yaroslav13]

You can use alignment propery - like AlignmentDirectional.centerStart, and also take a look at decoration.contentPadding and menuItemStyleData.padding properties