Flutter DropdownButtonFormField labelText 和下拉间距问题

Question

这是包含 2 个 DropdownButtonFormField 的 Row 中的代码

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;
                    });
                  },
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  );

这些是列表数据:

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",
    ),
  ];

如图所示。我的问题是如何删除装饰器标签文本(如性别)和标有“男性”的下拉按钮之间的额外空间。

我不能使用 ConstrainedBox，因为它要求我必须设置宽度和高度。即使我将宽度设置为 double.infinity

Answer 1

DropdownButtonFormField 无法根据您的要求进行自定义。 Re: stack overflow answer

选项#1更新 DropdownMenuItems 的 TextStyle

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),
  ),
));

选项 #2改为使用 DropdownButton

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),
          ],
        ),
      ],
    ),
  ),
);

你也可以引用这个链接来获得新鲜的想法 HOW TO CHANGE THE ITEM TEXT SIZE OF A DROPDOWNBUTTON IN FLUTTER