如何在 TextField() Flutter 上制作范围数值

Question

This is my code:

            Padding(
              padding: const EdgeInsets.only(left: 8.0),
              child: TextField(
                inputFormatters: [
                  LengthLimitingTextInputFormatter(2),
                  WhitelistingTextInputFormatter.digitsOnly,
                ],
                keyboardType: TextInputType.number,
                decoration: new InputDecoration(
                    icon: Icon(Icons.assessment),
                    hintText: "Nilai",
                    border: InputBorder.none),
                onChanged: (String str) {
                  nilai = str;
                },
              ),
            ),

How to make the input number like only range 1 - 20?

I'm try to using

WhitelistingTextInputFormatter(RegExp("[1-20]")),

but, because this WhitelistingTextInputFormatter RegExp type is string, then I can still type 22 because 2 is allowed there.

Answer 1

You can implement you own TextInputFormatter by extending the TextInputFormatter class and then implementing the formatEditUpdate() method.

Here is an example for you use case -

class CustomRangeTextInputFormatter extends TextInputFormatter {

  @override
  TextEditingValue formatEditUpdate(TextEditingValue oldValue,TextEditingValue newValue,) { 
    if(newValue.text == '')
      return TextEditingValue();
    else if(int.parse(newValue.text) < 1)
      return TextEditingValue().copyWith(text: '1');

    return int.parse(newValue.text) > 20 ? TextEditingValue().copyWith(text: '20') : newValue;
  }
}

And you can add the custom formatter to the TextField like so -

TextField(
  inputFormatters: [
    WhitelistingTextInputFormatter.digitsOnly,
    CustomRangeTextInputFormatter(),
  ],
  // Rest of the TextField code
)

Hope this helps!

Answer 2

keyboardType:
   TextInputType.number,
  inputFormatters:[                        //only numeric keyboard.
    LengthLimitingTextInputFormatter(6),      //only 6 digit
    WhitelistingTextInputFormatter.digitsOnly
  ],

hope this will help you

Answer 3

The top upvoted answer exhibits some odd behavior when you type a number and then delete it (eg if you try typing in a new number it stops working).

I made a slightly altered TextInputFormatter that let's you specify the min and max and fixes some of the weird behaviors from the original answer.

class NumericalRangeFormatter extends TextInputFormatter {
  final double min;
  final double max;

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

  @override
  TextEditingValue formatEditUpdate(
    TextEditingValue oldValue,
    TextEditingValue newValue,
  ) {

    if (newValue.text == '') {
      return newValue;
    } else if (int.parse(newValue.text) < min) {
      return TextEditingValue().copyWith(text: min.toStringAsFixed(2));
    } else {
      return int.parse(newValue.text) > max ? oldValue : newValue;
    }
  }
}

Answer 4

You could replace onChanged by:

onChanged: (String value) {
    try {
        if(int.parse(value) >= 1 && int.parse(value) <= 20) {
            nilai = value;
        }
    } catch (e) {}

Answer 5

Solved

this is may be for someone with the same problem with me, I make this condition

int lenght;
if (widget.nilai < 10){
  lenght = 1;
} else {
  lenght = 2;
}

and this

Padding(
      padding: const EdgeInsets.only(left: 8.0),
      child: TextField(
        inputFormatters: [
          LengthLimitingTextInputFormatter(lenght),
          WhitelistingTextInputFormatter(RegExp("[0-"+widget.nilai.toString()+"]")),
        ],
        keyboardType: TextInputType.number,
        decoration: new InputDecoration(
            icon: Icon(Icons.assessment),
            hintText: "Nilai",
            border: InputBorder.none),
        onChanged: (String str) {
          nilai = str;
        },
      ),
    ),

by the way, widget.nilai is dynamic value from my database

Answer 6

int.parse(value.toString()) < rangoMinimo ? 'El valor debe de ser mayor o igual a ${rangoMinimo}' : int.parse(value.toString()) > rangoMaximo ? 'El valor debe de ser menor o igual a ${rangoMaximo}' : null : null

Answer 7

There is a property available for Max length maxLength: 20, so you can use this

        Padding(
          padding: const EdgeInsets.only(left: 8.0),
          child: TextField(
            inputFormatters: [
              LengthLimitingTextInputFormatter(2),
              WhitelistingTextInputFormatter.digitsOnly,
            ],
            maxLength: 20,
            keyboardType: TextInputType.number,
            decoration: new InputDecoration(
                icon: Icon(Icons.assessment),
                hintText: "Nilai",
                border: InputBorder.none),
            onChanged: (String str) {
              nilai = str;
            },
          ),
        ),