Flutter中如何修改TextFormField组件颜色？聚焦颜色修改无效求助

这个问题我之前也碰到过！当你把主题主色改成白色后，Flutter的默认样式会把输入框的聚焦态样式（比如边框、标签文本）同步成主题主色，而你设置的focusColor其实并不是管这个的——它主要是用于像按钮这类组件获取焦点时的背景色，对TextFormField的聚焦边框/文本颜色没用。下面给你两种解决方案：

1. 单独给TextFormField自定义聚焦样式 #

直接在InputDecoration里明确设置聚焦状态的边框、标签文本颜色，同时别忘了开启filled: true才能让fillColor生效：

TextFormField(
  style: TextStyle(color: Colors.grey),
  focusNode: _confirmPasswordFocusNode,
  obscureText: true,
  // 解决光标颜色问题（如果需要）
  cursorColor: Colors.black54,
  decoration: InputDecoration(
    fillColor: Colors.black54,
    filled: true, // 必须添加这个属性才会显示填充色
    labelText: '비밀번호 확인',
    icon: Icon(Icons.lock_outline),
    // 自定义聚焦时的下划线边框
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.black54),
    ),
    // 可选：自定义未聚焦时的边框
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.grey),
    ),
    // 设置标签文本的颜色（包括聚焦状态）
    labelStyle: TextStyle(color: Colors.grey),
    // 可选：自定义错误状态下的聚焦边框
    focusedErrorBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.red),
    ),
  ),
  onChanged: (value) { ... },
)

2. 全局主题统一设置（推荐） #

如果你的App里有多个TextFormField，不想逐个修改的话，可以在ThemeData里配置inputDecorationTheme，一次性统一所有输入框的样式：

ThemeData(
  primaryColor: Colors.white, // 你的主题主色
  // 统一配置输入框样式
  inputDecorationTheme: InputDecorationTheme(
    fillColor: Colors.black54,
    filled: true,
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.black54),
    ),
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.grey),
    ),
    labelStyle: TextStyle(color: Colors.grey),
  ),
  // 统一配置光标和文本选择样式
  textSelectionTheme: TextSelectionThemeData(
    cursorColor: Colors.black54,
    selectionColor: Colors.grey[300],
    selectionHandleColor: Colors.black54,
  ),
)

关键说明 #

• focusedBorder才是控制输入框聚焦时下划线颜色的属性，而非focusColor；
• filled: true是fillColor生效的前提，很多人会漏掉这个；
• 如果光标颜色也变成白色了，记得通过cursorColor（局部）或textSelectionTheme（全局）修改。

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