如何在Flutter的TextFormField中限制用户输入1-4000范围外的数字

要实现限制用户输入1至4000之间的数字，核心是通过自定义TextInputFormatter拦截并校验输入内容，结合原有数字过滤规则即可达成需求。以下是具体实现步骤：

1. 自定义范围校验输入格式化器 #

创建一个继承自TextInputFormatter的类，用于判断输入值是否在指定范围内：

class NumberRangeInputFormatter extends TextInputFormatter {
  final int min;
  final int max;

  NumberRangeInputFormatter({required this.min, required this.max});

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    // 空输入直接放行
    if (newValue.text.isEmpty) return newValue;

    // 解析输入为数字，非数字内容回退到旧值
    final inputNumber = int.tryParse(newValue.text);
    if (inputNumber == null) return oldValue;

    // 小于最小值时自动修正为最小值
    if (inputNumber < min) {
      return TextEditingValue(
        text: min.toString(),
        selection: TextSelection.collapsed(offset: min.toString().length),
      );
    }
    // 大于最大值时阻止输入，保留旧值
    else if (inputNumber > max) {
      return oldValue;
    }

    // 符合范围，允许输入
    return newValue;
  }
}

2. 修改原有TextFormField配置 #

将自定义格式化器加入inputFormatters列表，替换原有的单一数字过滤：

TextFormField(
  controller: _recruitStockEditingController,
  keyboardType: TextInputType.number,
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly, // 仅允许输入数字
    NumberRangeInputFormatter(min: 1, max: 4000), // 限制范围
  ],
  // 可选：添加表单验证，给用户明确提示
  validator: (value) {
    if (value == null || value.isEmpty) {
      return "请输入数量";
    }
    final num = int.tryParse(value);
    if (num == null) {
      return "请输入有效数字";
    }
    if (num < 1 || num > 4000) {
      return "数量需在1-4000之间";
    }
    return null;
  },
  decoration: InputDecoration(
    contentPadding: EdgeInsets.only(
      left: 21.0.w, top: 11.0.h, bottom: 11.0.h),
    hintText: "请输入数量",
    hintStyle: TextStyle(
      fontSize: 14.0.sp, color: const Color(0xff696C75)),
    border: OutlineInputBorder(
      borderSide: const BorderSide(color: Color(0xffCACBD4)),
      borderRadius: BorderRadius.circular(6)),
  ),
)

额外说明 #

• 该方案能拦截手动输入、粘贴等多种输入场景，确保内容始终符合范围要求；
• 配合validator可以在表单提交时给用户明确的错误提示，提升交互体验；
• 如果需要动态修改范围（比如上限不是固定4000），可以给NumberRangeInputFormatter添加更新参数的方法，或者在初始化时传入动态值。

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