Flutter TextFormField仅允许数字、单个小数点及两位小数的实现

你当前的配置问题在于正则表达式无法限制小数点数量和小数位数，下面提供两种可行的实现方案：

方案一：自定义 InputFormatter（推荐） #

这种方式更灵活，能处理所有边界情况（比如禁止开头输入小数点、限制小数位数等）：

class DecimalTextInputFormatter extends TextInputFormatter {
  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    // 新输入内容为空，直接返回
    if (newValue.text.isEmpty) {
      return newValue.copyWith(text: '');
    }

    // 匹配数字+单个小数点+最多两位小数的正则
    RegExp regex = RegExp(r'^\d*\.?\d{0,2}$');
    if (!regex.hasMatch(newValue.text)) {
      // 不符合规则，返回旧输入值
      return oldValue;
    }

    // 自动处理开头输入小数点的情况（补0）
    if (newValue.text.startsWith('.')) {
      return TextEditingValue(
        text: '0${newValue.text}',
        selection: TextSelection.collapsed(offset: newValue.selection.end + 1),
      );
    }

    return newValue;
  }
}

在TextFormField中使用：

TextFormField(
  keyboardType: TextInputType.numberWithOptions(decimal: true),
  inputFormatters: [DecimalTextInputFormatter()],
  decoration: InputDecoration(labelText: '请输入数字'),
)

方案二：使用 FilteringTextInputFormatter 配合精准正则 #

如果不想自定义类，可以用更严格的正则表达式直接限制：

TextFormField(
  keyboardType: TextInputType.numberWithOptions(decimal: true),
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp(r'^\d*\.?\d{0,2}$')),
  ],
  decoration: InputDecoration(labelText: '请输入数字'),
)

注意：这种方式无法自动处理开头输入小数点的情况（比如输入.会被允许为.xx），如果需要禁止这种场景，优先选方案一。

关键说明 #

• keyboardType 改用 TextInputType.numberWithOptions(decimal: true)，更贴合小数输入场景
• 正则 ^\d*\.?\d{0,2}$ 的含义：
  • ^：匹配字符串开头
  • \d*：允许0个或多个整数数字
  • \.?：最多允许1个小数点
  • \d{0,2}：小数部分最多保留2位数字
  • $：匹配字符串结尾

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