Flutter中如何限制TextFormField输入值不超过指定数值？

原有代码不生效的原因 #

你在onChanged回调中返回字符串的写法完全无效，onChanged只是监听输入内容变化的回调，没有拦截输入、触发校验的能力，返回的任何值都不会被框架处理，所以既无法阻止用户输入超范围内容，也不会弹出错误提示。

方案1：实时拦截非法输入（用户无法输入超标内容） #

使用TextInputFormatter可以在输入内容写入输入框之前就做校验，不符合规则的内容会被直接拦截，用户根本看不到超标内容出现在输入框里，输入体验最流畅。
首先自定义一个数值范围限制的输入格式化器：

class MaxValueInputFormatter extends TextInputFormatter {
  final num maxValue;
  MaxValueInputFormatter(this.maxValue);

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
    // 允许空内容，方便用户清空后重新输入
    if (newValue.text.isEmpty) return newValue;
    // 校验输入是否为合法数字，非数字直接拦截
    final num? inputNum = num.tryParse(newValue.text);
    if (inputNum == null) return oldValue;
    // 超过最大值时拦截，返回旧的输入内容
    if (inputNum > maxValue) {
      // 可选：此处可调用Toast提示，告知用户输入超过上限
      return oldValue;
    }
    // 校验通过，允许输入
    return newValue;
  }
}

在TextFormField中配置使用：

// 提前从Provider获取阈值
final int maxQty = Provider.of<SaleProvider>(context, listen: false)
    .remainNewQuantity(currentProductItemSelected.id);

TextFormField(
  style: const TextStyle(fontSize: 20),
  keyboardType: TextInputType.number, // 唤起数字键盘减少非法输入
  inputFormatters: [
    MaxValueInputFormatter(maxQty), // 加入输入拦截器
    FilteringTextInputFormatter.digitsOnly, // 可选：限制只能输入整数
  ],
  onChanged: (value) {
    if (value.isNotEmpty) {
      setState(() {
        qty = int.parse(value);
        updateByQty();
      });
    }
  },
)

方案2：保留输入+实时错误提示 #

如果需要让用户看到自己输入的内容，同时给出明确的错误提示，可以用TextFormField自带的validator能力，配合自动校验模式实时提示错误：

final int maxQty = Provider.of<SaleProvider>(context, listen: false)
    .remainNewQuantity(currentProductItemSelected.id);

TextFormField(
  style: const TextStyle(fontSize: 20),
  keyboardType: TextInputType.number,
  autovalidateMode: AutovalidateMode.onUserInteraction, // 用户输入时实时触发校验
  onChanged: (value) {
    if (value.isNotEmpty) {
      final inputNum = int.tryParse(value);
      if (inputNum != null && inputNum <= maxQty) {
        setState(() {
          qty = inputNum;
          updateByQty();
        });
      }
    }
  },
  validator: (value) {
    if (value == null || value.isEmpty) return '请输入数量';
    final inputNum = int.tryParse(value);
    if (inputNum == null || inputNum <= 0) return '请输入合法的正整数';
    if (inputNum > maxQty) return '输入数量不能超过$maxQty';
    return null; // 返回null代表校验通过
  },
)

注意事项 #

• 不要用int.parse直接转换输入内容，用户输入非数字内容时会直接抛出异常导致页面崩溃，统一用int.tryParse做安全转换
• 如果阈值是动态变化的（比如库存实时更新），需要在阈值变化时触发组件重建，保证输入拦截器和校验逻辑拿到的是最新的阈值
• 如果需要支持小数输入，把代码里的int替换为double即可，逻辑不需要改动
• 实时拦截方案如果需要给用户反馈，建议用轻量Toast提示，不要弹出弹窗打断用户的输入流程

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