Flutter DropdownMenu固定高度及下拉列表背景色设置问题

1. 设置DropdownMenu输入框固定高度 #

直接用menuHeight属性指定固定数值，这个属性控制输入框区域的高度，设置后不会随内容或状态变动：

DropdownMenu<String>(
  // 固定输入框高度
  menuHeight: 56.0,
  requestFocusOnTap: true,
  controller: controller.buyerController,
  // 其他原有属性...
)

2. 解决添加尾部图标后下拉面板高度变化的问题 #

默认下拉面板高度会自适应条目数量，要固定面板高度，通过menuStyle设置fixedSize，让面板保持固定高度，超出内容自动滚动：

DropdownMenu<String>(
  // 固定下拉面板高度
  menuStyle: MenuStyle(
    fixedSize: MaterialStateProperty.all(const Size.fromHeight(200.0)),
  ),
  requestFocusOnTap: true,
  controller: controller.buyerController,
  trailingIcon: IconButton(
    icon: const Icon(Icons.clear),
    onPressed: () {
      controller.clear("po");
    },
  ),
  // 其他原有属性...
)

3. 修改下拉列表的背景颜色 #

同样通过menuStyle的backgroundColor属性设置下拉面板的背景色：

DropdownMenu<String>(
  menuStyle: MenuStyle(
    // 设置下拉面板背景色
    backgroundColor: MaterialStateProperty.all(Colors.grey[100]),
    fixedSize: MaterialStateProperty.all(const Size.fromHeight(200.0)),
  ),
  // 其他原有属性...
)

完整修改后的代码示例 #

DropdownMenu<String>(
    requestFocusOnTap: true,
    controller: controller.buyerController,
    label: Text(controller.buyerLabel.value),
    // 固定输入框高度
    menuHeight: 56.0,
    // 配置下拉面板样式：固定高度+背景色
    menuStyle: MenuStyle(
      fixedSize: MaterialStateProperty.all(const Size.fromHeight(200.0)),
      backgroundColor: MaterialStateProperty.all(Colors.grey[100]),
    ),
    dropdownMenuEntries: controller.dropdownItems.map((option) {
     return DropdownMenuEntry<String>(
           value: option,
           label: option,
         );
      }).toList(),
    inputDecorationTheme: InputDecorationTheme(
       enabledBorder: OutlineInputBorder(
       borderRadius: BorderRadius.circular(30),
       borderSide: const BorderSide(color: Colors.grey, width: 1.5),
         ),
     focusedBorder: OutlineInputBorder(
       borderRadius: BorderRadius.circular(30),
       borderSide: const BorderSide(color: Colors.black, width: 2.0),
         ),
     filled: true,
     fillColor: Colors.white,
    ),
    width: widthValue,
    trailingIcon: IconButton(
    icon: const Icon(Icons.clear),
    onPressed: () {
     controller.clear("po");
     },
    ),
    onSelected: controller.buyerFilter,
)

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