如何将Flutter TextField默认蓝色下划线改为灰色且保留下划线样式

不要直接使用通用Border类配置边框，否则会出现四周边框、间距错乱等样式改动，改用Flutter专门为下划线样式输入框提供的UnderlineInputBorder类，就能1:1保留默认下划线的布局、交互、粗细表现，仅修改你需要的颜色参数。

单组件局部修改 #

直接给目标TextField的InputDecoration配置对应交互状态的下划线颜色即可，原有其他代码完全不需要改动：

TextField(
  decoration: InputDecoration(
    // 未聚焦、未输入状态的下划线
    enabledBorder: const UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.grey),
    ),
    // 聚焦、输入中的下划线，不需要改聚焦色可以删掉这部分保留默认蓝色
    focusedBorder: const UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.grey),
    ),
  ),
  // 原有style等配置保持不变
  style: TextStyle(
      fontSize: 20,
      decoration: TextDecoration.none,
      decorationStyle: TextDecorationStyle.dotted,
      decorationColor: Color(0xffF6F6F6),
      fontStyle: FontStyle.normal,
      fontWeight: FontWeight.normal,
      color: Color(0xff3B3B3B),
  ),
)

如果需要调整下划线粗细，只要在BorderSide里加width参数即可，默认值为1.0，和原生下划线粗细完全一致。

全局统一配置 #

如果项目里所有TextField都要用灰色下划线，不用逐个组件加配置，直接在App根节点MaterialApp的主题里全局设置输入框样式：

MaterialApp(
  theme: ThemeData(
    inputDecorationTheme: const InputDecorationTheme(
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.grey),
      ),
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.grey),
      ),
    ),
    // 其他原有主题配置保持不变
  ),
)

内容的提问来源于stack exchange，提问作者pomoworko.com