Flutter TextField蓝色下划线如何去除？已解决黄色下划线问题

你已经知道可以通过TextDecoration.none消除文本本身的黄色下划线，但你这段代码里的蓝色下划线，是TextField未覆盖全边框状态时的默认样式。

解决方案：补充覆盖错误状态的边框属性 #

你当前只设置了border、enabledBorder、focusedBorder，但忽略了错误状态下的errorBorder和focusedErrorBorder——这两个状态触发时会显示默认的蓝色下划线。只需要在InputDecoration里添加这两个属性，设置为无边框即可：

修改后的完整代码：

Padding(
  // Experiment with these values to adjust the padding of the search field
  padding: const EdgeInsets.fromLTRB(2, 16, 2, 8), // Reduced side padding
  child: TextField(
    controller: widget.searchController,
    style: const TextStyle(
      decoration: TextDecoration.none,
      color: Colors.white,
    ),
    textCapitalization: TextCapitalization.characters,
    decoration: InputDecoration(
      labelText: 'SEARCH',
      labelStyle: const TextStyle(color: Colors.white),
      prefixIcon: const Icon(Icons.search, color: Colors.white),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide.none,
      ),
      enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide.none,
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide(color: Colors.white.withOpacity(0.5)),
      ),
      // 新增以下两行，消除错误状态的蓝色下划线
      errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide.none,
      ),
      focusedErrorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: BorderSide.none,
      ),
      filled: true,
      fillColor: Colors.white.withOpacity(0.1),
    ),
    onChanged: (value) {
      filterAirports(value.toUpperCase());
    },
  ),
)

原理说明 #

TextField的InputDecoration包含多种状态的边框配置，只要有任意一种状态的边框未自定义，就会回退到系统默认的蓝色样式。补充上述两个属性后，所有状态下的边框都被明确设置为无边框，自然不会再出现蓝色下划线。

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