Flutter中DropdownSearch下拉菜单高度过大如何优化？

你遇到的问题核心是设置了fit: FlexFit.tight，这个属性会强制下拉菜单占满可用空间，导致单个选项时出现大量空白。同时可以通过限制菜单最大高度进一步优化显示效果，具体修改如下：

修改后的代码 #

Expanded(
  child: DropdownSearch<Branch>(
    items: userP.branch ?? [],
    onChanged: (item) {
      setState(() {
        _selectedBranch = item;
        Provider.of<MainProvider>(context, listen: false) 
           .setSelectedBranchId(item!.id!);
        });
    },
    selectedItem: _selectedBranch,
    dropdownDecoratorProps: const DropDownDecoratorProps(
      baseStyle: TextStyle(
        overflow: TextOverflow.ellipsis,
      ),
      dropdownSearchDecoration: InputDecoration(
        labelText: 'Branch',
        labelStyle: TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.w400,
          color: AppColors.textPrimary,
        ),
        floatingLabelAlignment: FloatingLabelAlignment.start,
        contentPadding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
        border: OutlineInputBorder(),
     ),
    ),
    itemAsString: (Branch data) {
      return data.branchName ?? "";
    },
    popupProps: PopupPropsSingleSelection.menu(
      showSearchBox: false,
      menuProps: const MenuProps(
        // 根据Item样式调整最大高度，适配单个选项的尺寸
        maxHeight: 60,
      ),
      itemBuilder: (context, branch, val) {
        return Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8),
          child: DropdownMenuItem(
             child: Text(branch.branchName ?? ""),
          ),
        );
      },
    ),
  ),
),

关键修改点说明 #

• 移除fit: FlexFit.tight：该属性会强制菜单填充父容器可用空间，是空白问题的核心原因。移除后菜单会根据选项内容自动适配高度。
• 改用PopupPropsSingleSelection：从你的onChanged逻辑来看是单选场景，使用单选类型的PopupProps更贴合需求，避免多选布局带来的不必要空间占用。
• 设置menuProps.maxHeight：通过限制最大高度，确保单个选项时菜单不会过高，你可以根据自己的Item样式调整数值（比如Item高度加上下内边距的总和）。

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