调整Flutter中DropdownButton2的下划线宽度，避免超出边框

问题原因 #

DropdownButton2默认自带的下划线宽度与按钮宽度完全一致，而你的按钮设置了圆角边框，导致下划线在圆角区域超出边框范围。

解决方案 #

方法1：隐藏默认下划线（推荐） #

如果你的按钮已经配置了边框样式，直接移除默认下划线即可，不会影响其他功能。在ButtonStyleData中添加underline: const SizedBox.shrink()：

修改后的buttonStyleData代码片段：

buttonStyleData: ButtonStyleData(
  height: 50,
  width: double.infinity,
  padding: const EdgeInsets.only(left: 14, right: 14),
  underline: const SizedBox.shrink(), // 新增此行隐藏默认下划线
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(14),
    border: Border.all(
      color: Colors.black,
    ),
    color: Colors.white,
  ),
),

方法2：自定义内部下划线（如需保留下划线） #

如果需要保留选中状态的下划线，可以在按钮文本下方添加自定义下划线，通过内边距限制宽度，避免超出圆角。示例修改hint部分：

hint: Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text(
      AppLocalizations.of(context)!.dropDownButtonHintText,
      style: const TextStyle(
        fontSize: 16,
        color: Colors.black,
      ),
    ),
    const SizedBox(height: 4),
    Container(
      height: 1,
      color: Colors.grey,
      margin: const EdgeInsets.symmetric(horizontal: 10), // 内边距适配圆角
    ),
  ],
),

完整修改后的代码 #

Container(
  width: double.infinity,
  margin: const EdgeInsets.symmetric(horizontal: 30),
  child: DropdownButton2<String>(
    isExpanded: true,
    hint: Text(
      AppLocalizations.of(context)!.dropDownButtonHintText,
      style: const TextStyle(
        fontSize: 16,
        color: Colors.black,
      ),
    ),
    items: languages
        .map((String language) => DropdownMenuItem<String>(
              value: language,
              child: Text(
                language,
                style: const TextStyle(fontSize: 14),
              ),
            ))
        .toList(),
    value: selectedValue,
    onChanged: (value) {
      setState(() {
        selectedValue = value;
      });
    },
    dropdownSearchData: DropdownSearchData(
      searchController: _searchController,
      searchInnerWidgetHeight: 50,
      searchInnerWidget: Container(
        height: 50,
        padding: const EdgeInsets.only(top: 8, bottom: 4, right: 8, left: 8),
        child: TextFormField(
          expands: true,
          maxLines: null,
          controller: _searchController,
          decoration: InputDecoration(
            isDense: true,
            contentPadding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
            hintText: AppLocalizations.of(context)!.dropDownSearchHintText,
            hintStyle: const TextStyle(fontSize: 14),
          ),
        ),
      ),
      searchMatchFn: (language, searchValue) {
        return language.value.toString().contains(searchValue);
      },
    ),
    buttonStyleData: ButtonStyleData(
      height: 50,
      width: double.infinity,
      padding: const EdgeInsets.only(left: 14, right: 14),
      underline: const SizedBox.shrink(), // 隐藏默认下划线
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(14),
        border: Border.all(color: Colors.black),
        color: Colors.white,
      ),
    ),
    dropdownStyleData: DropdownStyleData(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(14),
        color: Colors.white,
      ),
      scrollbarTheme: ScrollbarThemeData(
        radius: const Radius.circular(40),
        thickness: MaterialStateProperty.all(6),
        thumbVisibility: MaterialStateProperty.all(true),
      ),
    ),
    menuItemStyleData: const MenuItemStyleData(
      height: 30,
      padding: EdgeInsets.only(left: 14, right: 14),
    ),
    onMenuStateChange: (isOpen) {
      if (!isOpen) {
        _searchController.clear();
      }
    },
  ),
),

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