使用FilteringTextInputFormatter.allow时TextFormField内容全被清空如何解决

问题原因 #

你当前使用的正则表达式添加了行首锚点^和行尾锚点$，要求输入的全部内容必须从头到尾完全匹配允许的字符规则，只要用户输入了一个不符合要求的字符，整个输入字符串就会匹配失败，FilteringTextInputFormatter就会直接清空所有内容。

解决方案 #

直接去掉正则中的行首、行尾锚点即可，修改后的代码如下：

inputFormatters: [
  FilteringTextInputFormatter.allow(RegExp(r'[a-zA-Z0-9@_]+'))
],

修改后 formatter 的逻辑会变为：仅过滤掉输入内容中不符合规则的单个非法字符，已经输入的合法内容会全部保留，不会出现全量清空的问题。

补充说明 #

如果同时需要限制输入长度，可以叠加LengthLimitingTextInputFormatter共同使用，示例如下：

inputFormatters: [
  FilteringTextInputFormatter.allow(RegExp(r'[a-zA-Z0-9@_]+')),
  LengthLimitingTextInputFormatter(30), // 可自定义最大输入字符数
],

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