在TextField中设置数字间隔

Question

如何在TextField中设置间隔？我希望它仅接受1-100 ...

范围内的数字

这是我的小部件：

TextField(
          inputFormatters: [
            LengthLimitingTextInputFormatter(3)
          ],
          cursorColor: Colors.white,
          keyboardType: TextInputType.number,
          textInputAction: TextInputAction.search,
          textAlign: TextAlign.right,
          style: TextStyle(
            color: Colors.white,
            fontSize: 20.0,
          ),
          decoration: InputDecoration.collapsed(
            hintText: '',
            hintStyle: TextStyle(fontSize: 14),
          ),
        ),

Answer 1

您可以创建自己的输入格式化程序，以限制数字范围，如下所示：

class LimitRangeTextInputFormatter extends TextInputFormatter {
  LimitRangeTextInputFormatter(this.min, this.max) : assert(min < max);

  final int min;
  final int max;

  @override
  TextEditingValue formatEditUpdate(
      TextEditingValue oldValue, TextEditingValue newValue) {
    var value = int.parse(newValue.text);
    if (value < min) {
      return TextEditingValue(text: min.toString());
    } else if (value > max) {
      return TextEditingValue(text: max.toString());
    }
    return newValue;
  }
}

然后将其添加到您的inputFormatters：

inputFormatters: [
    LengthLimitingTextInputFormatter(3),
    LimitRangeTextInputFormatter(1, 100),
],

如果用户输入的数字大于100，则文本字段会将其更改回100。