Flutter如何设置InputDecorationTheme错误状态填充色与图标颜色

InputDecorationTheme 没有提供独立的 errorFillColor、errorIconColor 属性，输入框的填充色、图标颜色属于状态敏感样式，会根据组件当前的交互/校验状态动态取值，你可以通过 MaterialStateProperty 做状态判断实现需求，有两种常用实现方案：

方案1：全局主题配置（推荐，统一所有输入框样式） #

直接修改你现有主题中的 InputDecorationTheme 配置，将固定的颜色值替换为状态响应式的解析逻辑，当输入框处于错误校验状态时自动返回对应样式：

inputDecorationTheme: InputDecorationTheme(
      contentPadding: const EdgeInsets.all(AppDimension.paddingLarge),
      filled: true,
      // 状态判断配置图标颜色
      iconColor: MaterialStateColor.resolveWith((states) {
        // 检测到错误状态时返回错误色
        if (states.contains(MaterialState.error)) {
          return AppColor.errorRed; // 替换为你需要的错误状态图标色
        }
        return Colors.black; // 默认状态图标色
      }),
      // 状态判断配置填充色
      fillColor: MaterialStateColor.resolveWith((states) {
        // 检测到错误状态时返回错误填充色
        if (states.contains(MaterialState.error)) {
          return AppColor.lightErrorRed; // 替换为你需要的错误状态填充色
        }
        return AppColor.greyColor.withOpacity(0.7); // 默认填充色
      }),
      border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(AppDimension.radiusLarge),
          borderSide: BorderSide.none),
      disabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(AppDimension.radiusLarge),
          borderSide: BorderSide.none),
      enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(AppDimension.radiusLarge),
          borderSide: BorderSide.none),
      focusedErrorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(AppDimension.radiusLarge),
          borderSide: BorderSide.none),
      errorBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(AppDimension.radiusLarge),
          borderSide: BorderSide.none),
    ),

• 上述逻辑中，只要组件状态集合包含 MaterialState.error，就代表输入框触发了校验错误，此时会自动应用你配置的错误态颜色，其余状态保持默认样式即可。

方案2：单个输入框单独配置 #

如果你只需要给特定页面/特定输入框设置错误态样式，不需要修改全局主题，可以直接在对应 TextFormField 的 decoration 属性中单独配置状态解析逻辑：

TextFormField(
  // 你的校验逻辑
  validator: (value) {
    if (value?.trim().isEmpty ?? true) return '输入内容不能为空';
    return null;
  },
  decoration: InputDecoration(
    // 其余配置和全局主题保持一致，单独重写颜色逻辑
    iconColor: MaterialStateColor.resolveWith((states) {
      if (states.contains(MaterialState.error)) return AppColor.errorRed;
      return Colors.black;
    }),
    fillColor: MaterialStateColor.resolveWith((states) {
      if (states.contains(MaterialState.error)) return AppColor.lightErrorRed;
      return AppColor.greyColor.withOpacity(0.7);
    }),
  ),
)

效果参考 #

注意：如果你的项目未开启 Material3，请先在根主题中配置 useMaterial3: true，确保状态属性解析逻辑正常生效。如果暂时无法升级到Material3，也可以在校验触发时通过setState手动维护错误状态，动态修改对应颜色值，不过优先推荐使用MaterialStateProperty的实现方式，无需额外维护状态变量。

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