Flutter TextFormField样式定制：背景色切换与光标图标颜色修改

一、实现背景颜色动态切换 #

通过监听输入框的焦点状态与文本内容，动态调整外层Container的背景色：

• 无焦点且文本为空时，背景为灰色
• 获得焦点或已有文本时，背景切换为白色

二、自定义激活状态下的光标与前缀图标颜色 #

• 直接指定光标颜色为自定义主题色
• 根据焦点状态切换前缀图标的颜色

修改后的完整代码片段 #

Container(
  width: inputWidth,
  padding: EdgeInsets.symmetric(horizontal: 5),
  // 动态切换背景色
  decoration: BoxDecoration(
    color: firstNameNode.hasFocus || firstNameController.text.isNotEmpty 
        ? Colors.white 
        : Colors.grey.shade200,
    borderRadius: BorderRadius.circular(15)
  ),
  child: TextFormField(
    focusNode: firstNameNode,
    autofocus: false,
    controller: firstNameController,
    obscureText: false,
    textAlignVertical: TextAlignVertical.center,
    // 设置光标颜色为主题primaryColor
    cursorColor: Theme.of(context).primaryColor,
    decoration: InputDecoration(
      // 根据焦点状态切换前缀图标颜色
      prefixIcon: Icon(
        Icons.person_outline,
        color: firstNameNode.hasFocus 
            ? Theme.of(context).primaryColor 
            : Colors.grey.shade600,
      ),
      border: InputBorder.none,
      hintText: "Full Name",
    ),
    onFieldSubmitted: (value) {
      phoneNode.requestFocus();
    },
  ),
)

额外优化：全局主题统一配置（可选） #

若需全局统一输入框样式，可在ThemeData中配置，避免重复代码：

theme: ThemeData(
  primaryColor: Color(0xFF623CEA),
  fontFamily: 'Manrope',
  inputDecorationTheme: InputDecorationTheme(
    // 聚焦状态下的前缀图标颜色
    focusedPrefixIconColor: Color(0xFF623CEA),
    // 默认状态下的前缀图标颜色
    prefixIconColor: Colors.grey.shade600,
  ),
  // 全局统一光标颜色
  textSelectionTheme: TextSelectionThemeData(
    cursorColor: Color(0xFF623CEA),
  ),
),

使用全局配置后，无需在单个TextFormField中重复设置光标与图标颜色，代码更简洁。

已尝试方案（中文翻译） #

• 直接为TextFormField添加focusColor属性
• 在ThemeData和InputDecorationTheme中配置focusColor

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