Flutter中如何修改TextFormField校验提示文本的颜色为灰色？

方法一：直接通过InputDecoration设置单个控件的错误提示样式 #

在TextFormField的decoration参数中，指定errorStyle并将颜色设为灰色即可：

TextFormField(
  autovalidateMode: AutovalidateMode.onUserInteraction,
  validator: (value) => validateCharacters(value),
  inputFormatters: [
    LengthLimitingTextInputFormatter(20),
  ],
  decoration: InputDecoration(
    // 配置错误提示文本的颜色为灰色
    errorStyle: TextStyle(color: Colors.grey),
  ),
),

String? validateCharacters(String? value) {
  String pattern = r'^(?=.*?)(?=.*?[a-z])(?=.*?[20]).{20,}$';
  RegExp regex = RegExp(pattern);
  if (value == null || value.isEmpty || !regex.hasMatch(value)) {
    return 'note: Only 20 characters allow';
  } else {
    return null;
  }
}

方法二：通过Theme组件统一配置范围内控件的错误提示样式 #

如果需要让多个输入框都应用灰色错误提示，可以用Theme包裹目标控件，修改全局主题中的inputDecorationTheme：

Theme(
  data: Theme.of(context).copyWith(
    inputDecorationTheme: InputDecorationTheme(
      errorStyle: TextStyle(color: Colors.grey),
    ),
  ),
  child: TextFormField(
    autovalidateMode: AutovalidateMode.onUserInteraction,
    validator: (value) => validateCharacters(value),
    inputFormatters: [
      LengthLimitingTextInputFormatter(20),
    ],
  ),
),

补充说明 #

• 方法一仅对当前TextFormField生效，适合单个控件的样式定制；
• 方法二会对Theme包裹下的所有使用InputDecoration的输入控件生效，适合批量样式统一；
• 你原代码中返回的提示文本里的反引号不会被Flutter解析为代码样式，若需要特殊格式的错误提示，可通过自定义errorText结合RichText`实现，但需额外处理控件的错误展示逻辑。

内容的提问来源于stack exchange，提问作者It'sPhil