Flutter 如何移除Autocomplete自定义下拉框的顶部下划线边框

你看到的下拉顶部的下划线根本不是下拉菜单自身的边框，是外层InputDecorator在输入框聚焦时默认绘制的聚焦态下划线。
你只给InputDecoration配置了默认的border参数，没有单独配置启用、聚焦状态下的边框规则，输入框激活弹出下拉时，组件会回退到默认的UnderlineInputBorder样式，这条线刚好卡在输入框和下拉菜单的衔接位置，视觉上就像下拉菜单的顶边。

方案1：补全InputDecoration全状态边框（优先用这个） #

在现有InputDecoration配置里，补上enabledBorder和focusedBorder，和你已经写的默认border保持一致，全部设为无边框即可：

InputDecoration(
  prefixIcon: const Icon(Icons.search, size: 25.0),
  // 原有默认border配置保留
  border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(50.0),
    borderSide: const BorderSide(width: 0, style: BorderStyle.none),
  ),
  // 新增：启用状态边框
  enabledBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(50.0),
    borderSide: const BorderSide(width: 0, style: BorderStyle.none),
  ),
  // 新增：聚焦状态边框
  focusedBorder: OutlineInputBorder(
    borderRadius: BorderRadius.circular(50.0),
    borderSide: const BorderSide(width: 0, style: BorderStyle.none),
  ),
  filled: true,
  hintStyle: TextStyle(color: Colors.grey[800]),
  hintText: "Type in your text",
  fillColor: Colors.white,
  isDense: true,
)

方案2：残留细线处理 #

如果改完上面的配置还有1px左右的细线，是你自定义下拉用的Material组件默认开启的前景边框绘制导致的，给这个Material组件加两个属性就能关掉：

Material(
  elevation: 4.0,
  // 新增这两行
  borderOnForeground: false,
  shape: const RoundedRectangleBorder(),
  child: ConstrainedBox(
    // 你原有ConstrainedBox的逻辑完全不用改
  )
)

额外优化提示 #

你现在用InputDecorator外层包裹Autocomplete的写法多套了一层装饰，实际上Autocomplete提供了fieldViewBuilder回调，可以直接自定义内部输入框的样式，能避免很多外层嵌套带来的样式联动问题，后续有空可以重构下，结构会更干净。

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