Flutter DropdownButtonFormField labelText and dropdown spacing issue

Question

This is the code in the Row that houses 2 DropdownButtonFormField

return Form(
    key: _formKey,
    child: SingleChildScrollView(
      padding: EdgeInsets.all(10),
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Flexible(
                child: DropdownButtonFormField(
                  decoration: InputDecoration(
                      contentPadding: EdgeInsets.fromLTRB(0, 5.5, 0, 0),
                      labelStyle: TextStyle(),
                      labelText: 'Gender'),
                  items: _genders,
                  value: client.gender,
                  onChanged: (value) {
                    setState(() {
                      client.gender = value;
                    });
                  },
                ),
              ),
              SizedBox(width: formFieldSpace),
              Flexible(
                child: DropdownButtonFormField(
                  decoration: InputDecoration(
                    contentPadding: EdgeInsets.fromLTRB(0, 5.5, 0, 0),
                    labelText: 'Marital Status',
                  ),
                  items: _maritals,
                  value: client.maritalStatus,
                  onChanged: (value) {
                    setState(() {
                      client.maritalStatus = value;
                    });
                  },
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );

These are the list data:

List<DropdownMenuItem<String>> _genders = [
    DropdownMenuItem(
      child: new Text("Male"),
      value: "Male",
    ),
    DropdownMenuItem(
      child: new Text("Female"),
      value: "Female",
    ),
  ];

  List<DropdownMenuItem<String>> _maritals = [
    DropdownMenuItem(
      child: new Text("Single"),
      value: "Single",
    ),
    DropdownMenuItem(
      child: new Text("Married"),
      value: "Married",
    ),
  ];

It shows up like the one in the image. My issue is how to remove the extra space between the decorator labelText like Gender and the dropdown button labeled "Male".

I cannot use a ConstrainedBox as it requires me to have to set width and height. Even if I set the width to double.infinity

Answer 1

DropdownButtonFormField cannot be customised based on your requirement. Re: stack overflow answer

Option #1 Update the TextStyle of your DropdownMenuItems

List<DropdownMenuItem<String>> _genders = new List();
_genders.add(DropdownMenuItem<String>(
  value: 'Male',
  child: Text(
    'Male',
    style: TextStyle(height: 0.0),
  ),
));
_genders.add(DropdownMenuItem<String>(
  value: 'Female',
  child: Text(
    'Female',
    style: TextStyle(height: 0.0),
  ),
));

Option #2 Use DropdownButton instead

Form(
  key: _formKey,
  child: SingleChildScrollView(
    padding: EdgeInsets.all(10),
    child: Row(
      children: <Widget>[
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Gender',
              style: TextStyle(),
            ),
            DropdownButton(
              items: _genders,
              value: client.gender,
              onChanged: (value) {
                setState(() {
                  client.gender = value;
                });
              },
            ),
          ],
        ),
        SizedBox(width: 10.0),
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              'Marital Status',
              style: TextStyle(),
            ),
            DropdownButton(
              items: _maritals,
              value: client.maritalStatus,
              onChanged: (value) {
                setState(() {
                  client.maritalStatus = value;
                });
              },
            ),
            SizedBox(width: 10.0),
          ],
        ),
      ],
    ),
  ),
);

You can also refer to this link for fresh ideas HOW TO CHANGE THE ITEM TEXT SIZE OF A DROPDOWNBUTTON IN FLUTTER