Flutter中如何修改DropdownMenu组件的边框样式？

最近在Flutter应用中将DropdownButton替换为DropdownMenu组件，但设置边框时遇到两个问题：

• 直接在DropdownMenu的inputDecorationTheme中设置OutlineInputBorder后，组件显示黑色边框；移除该设置则出现黑色下划线边框。
  对应代码：

  DropdownMenu<T>(               
    initialSelection: value,
    dropdownMenuEntries: items ?? [], 
    onSelected: (selectedValue) {
      onChanged?.call(selectedValue); 
    },
    width: MediaQuery.of(context).size.width, 
    hintText: hintText,
    leadingIcon: leadingIcon,
    trailingIcon: trailingIcon,
    textStyle: AppTextStyles.textFieldValue,
    inputDecorationTheme: InputDecorationTheme(
      filled: true,
      fillColor: AppColors.white,
      hintStyle: AppTextStyles.textFieldValue.copyWith(
        color: AppColors.textFieldPrefix,
      ),
      border: OutlineInputBorder(
        borderSide: BorderSide(
          color: AppColors.textFieldBorder,
          width: 1.sp,
        ),
        borderRadius: BorderRadius.circular(10.r),
      ),
      constraints: BoxConstraints(maxHeight: height),
    ),
  ),
  

• 使用Container包裹DropdownMenu自定义边框后，虽显示预期边框，但组件底部仍存在黑色下划线。
  对应代码：

  Container(           
    clipBehavior: Clip.hardEdge,
    decoration: BoxDecoration(
      border: Border.all(color: AppColors.textFieldBorder),
      borderRadius: BorderRadius.circular(10.r),
    ),
    child: DropdownMenu<T>(
      initialSelection: value, // Set the initial selection
      dropdownMenuEntries: items ?? [], // Pass the items
      onSelected: (selectedValue) {
        onChanged?.call(selectedValue); // Call the onChanged callback
      },
      width: MediaQuery.of(context).size.width, // Match the width
  
      hintText: hintText,
      leadingIcon: leadingIcon,
      trailingIcon: trailingIcon,
      textStyle: AppTextStyles.textFieldValue,
      inputDecorationTheme: InputDecorationTheme(
        filled: true,
        fillColor: AppColors.white,
        hintStyle: AppTextStyles.textFieldValue.copyWith(
          color: AppColors.textFieldPrefix,
        ),
        
        constraints: BoxConstraints(maxHeight: height),
      ),
    ),
  ),
  

解决方案 #

核心原因 #

DropdownMenu的inputDecorationTheme默认会继承全局主题或内置的边框样式，只设置border不足以覆盖所有交互状态下的边框（比如默认的underline状态），需要显式覆盖所有相关的边框属性。

方案一：直接通过inputDecorationTheme覆盖全状态边框 #

在inputDecorationTheme中同时设置border、enabledBorder、focusedBorder、disabledBorder等所有状态的边框，确保完全覆盖默认样式：

DropdownMenu<T>(               
  initialSelection: value,
  dropdownMenuEntries: items ?? [], 
  onSelected: (selectedValue) {
    onChanged?.call(selectedValue); 
  },
  width: MediaQuery.of(context).size.width, 
  hintText: hintText,
  leadingIcon: leadingIcon,
  trailingIcon: trailingIcon,
  textStyle: AppTextStyles.textFieldValue,
  inputDecorationTheme: InputDecorationTheme(
    filled: true,
    fillColor: AppColors.white,
    hintStyle: AppTextStyles.textFieldValue.copyWith(
      color: AppColors.textFieldPrefix,
    ),
    // 覆盖所有状态的边框
    border: OutlineInputBorder(
      borderSide: BorderSide(
        color: AppColors.textFieldBorder,
        width: 1.sp,
      ),
      borderRadius: BorderRadius.circular(10.r),
    ),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: AppColors.textFieldBorder,
        width: 1.sp,
      ),
      borderRadius: BorderRadius.circular(10.r),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: AppColors.textFieldBorder,
        width: 1.sp,
      ),
      borderRadius: BorderRadius.circular(10.r),
    ),
    disabledBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: AppColors.textFieldBorder,
        width: 1.sp,
      ),
      borderRadius: BorderRadius.circular(10.r),
    ),
    contentPadding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
    constraints: BoxConstraints(maxHeight: height),
  ),
),

方案二：隐藏默认边框，通过外层Container自定义边框 #

如果想要完全脱离InputDecoration的边框约束，可将所有默认边框设置为InputBorder.none，再通过外层Container实现自定义边框：

Container(           
  decoration: BoxDecoration(
    border: Border.all(color: AppColors.textFieldBorder),
    borderRadius: BorderRadius.circular(10.r),
  ),
  child: DropdownMenu<T>(
    initialSelection: value,
    dropdownMenuEntries: items ?? [], 
    onSelected: (selectedValue) {
      onChanged?.call(selectedValue); 
    },
    width: MediaQuery.of(context).size.width, 
    hintText: hintText,
    leadingIcon: leadingIcon,
    trailingIcon: trailingIcon,
    textStyle: AppTextStyles.textFieldValue,
    inputDecorationTheme: InputDecorationTheme(
      filled: true,
      fillColor: AppColors.white,
      hintStyle: AppTextStyles.textFieldValue.copyWith(
        color: AppColors.textFieldPrefix,
      ),
      // 隐藏所有默认边框
      border: InputBorder.none,
      enabledBorder: InputBorder.none,
      focusedBorder: InputBorder.none,
      disabledBorder: InputBorder.none,
      contentPadding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
      constraints: BoxConstraints(maxHeight: height),
    ),
  ),
),

以上两种方式都能彻底消除多余的黑色边框或下划线，实现符合预期的自定义边框样式。

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