如何移除DropdownButtonFormField选中值的下划线

你当前的代码已经尝试了DropdownButtonHideUnderline和设置enabledBorder为透明，但下划线仍存在的核心原因是：仅配置了默认状态的边框，未覆盖表单字段其他状态（如获取焦点、报错）的边框样式。

以下是两种可行的解决方法：

方法一：完善InputDecoration的全状态边框配置 #

直接在DropdownButtonFormField的decoration中覆盖所有状态的边框，统一设置为透明无边框，同时消除默认内边距避免布局冲突：

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 25.0),
  child: Container(
    padding: EdgeInsets.only(left: 20),
    decoration: BoxDecoration(
        color: Colors.grey[200],
        border: Border.all(color: Colors.white),
        borderRadius: BorderRadius.circular(12)),
    child: DropdownButtonHideUnderline(
      child: DropdownButtonFormField<String>(
        decoration: InputDecoration(
          // 覆盖所有状态的边框为透明
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.transparent),
          ),
          focusedBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.transparent),
          ),
          errorBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.transparent),
          ),
          disabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.transparent),
          ),
          focusedErrorBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.transparent),
          ),
          // 移除默认内边距，避免和外层Container的padding叠加
          contentPadding: EdgeInsets.zero,
        ),
        hint: Text('Type d\'utilisateur'),
        items: types.map(buildMenuItem).toList(),
        onChanged: (value) {
          setState(() {
            type = value!;
          });
        },
        value: type,
        isExpanded: true,
        iconSize: 26,
        icon: Padding(
          padding: const EdgeInsets.only(right: 8.0),
          child: Icon(
            Icons.arrow_drop_down,
            color: Colors.black,
          ),
        ),
      ),
    ),
  ),
),

关键说明： #

DropdownButtonFormField作为表单组件，在获取焦点、验证报错等状态下会自动切换边框样式，仅设置enabledBorder无法覆盖所有场景，必须将所有状态的边框都设为透明才能彻底移除下划线。

方法二：改用DropdownButton配合FormField手动封装 #

如果方法一仍不生效，可以放弃DropdownButtonFormField的默认封装，用DropdownButton搭配FormField自定义组件，彻底控制样式：

Padding(
  padding: const EdgeInsets.symmetric(horizontal: 25.0),
  child: Container(
    padding: EdgeInsets.only(left: 20),
    decoration: BoxDecoration(
        color: Colors.grey[200],
        border: Border.all(color: Colors.white),
        borderRadius: BorderRadius.circular(12)),
    child: FormField<String>(
      builder: (FormFieldState<String> state) {
        return DropdownButtonHideUnderline(
          child: DropdownButton<String>(
            hint: Text('Type d\'utilisateur'),
            items: types.map(buildMenuItem).toList(),
            onChanged: (value) {
              setState(() {
                type = value!;
                state.didChange(value); // 同步表单状态
              });
            },
            value: type,
            isExpanded: true,
            iconSize: 26,
            icon: Padding(
              padding: const EdgeInsets.only(right: 8.0),
              child: Icon(
                Icons.arrow_drop_down,
                color: Colors.black,
              ),
            ),
          ),
        );
      },
    ),
  ),
),

这种方式完全脱离DropdownButtonFormField的默认样式约束，能彻底避免下划线问题，同时保留表单字段的状态同步能力。

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