Flutter中如何让Dropdown下拉列表从控件底部开始展开

实现方案 #

方案1：官方属性配置（推荐，适配Flutter 3.10及以上版本） #

Flutter 3.10版本后为DropdownButtonFormField新增了dropdownDirection属性，专门用来控制下拉菜单的展开方向，你只需要在组件中新增一行配置即可强制下拉列表从控件底部向下展开：

dropdownDirection: DropdownDirection.down,

修改后的完整代码如下：

Container(
  height: 55.0,
  width: MediaQuery.of(context).size.width * 0.43,
  child: DropdownButtonFormField<String>(
    // 新增本行配置即可
    dropdownDirection: DropdownDirection.down,
    decoration: InputDecoration(
      errorText: _validatedrop ? 'This is the required field' : null,
      focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Color(int.parse(textfieldBorderColor)))),
      border: OutlineInputBorder(
          borderRadius: BorderRadius.all(Radius.circular(10.0))),
      errorBorder: OutlineInputBorder(
          borderSide: BorderSide(color: Colors.red, width: 5)),
    ),
    items: genderlist.map<DropdownMenuItem<String>>((String value) {
      return DropdownMenuItem<String>(
          value: value, child: Text(value));
    }).toList(),
    hint: Text(
      "Male",
      style: GoogleFonts.montserrat(
          color: Color(int.parse(hinttextColor))),
    ),
    onChanged: (value) async {
      setState(() {
        this.selectedGender = value!;
        if (this.selectedGender == "") {
          _validatedrop = true;
        } else {
          _validatedrop = false;
        }
      });
    },
  )),

方案2：低版本Flutter适配 #

如果你使用的Flutter版本低于3.10，没有上述属性，可以通过设置offset偏移量实现相同效果，偏移高度和你的外层Container高度保持一致即可：

// 新增以下两行配置
isExpanded: true,
offset: Offset(0, 55),

注意事项 #

如果控件下方的屏幕空间不足以放下全部下拉选项，系统会默认调整展开方向保证列表可交互，你可以额外配置menuMaxHeight属性限制下拉列表的最大高度，让列表内部滚动，即可保证始终向下展开。

内容的提问来源于stack exchange，提问作者TimeToCode