Search code examples
flutterdarttextfieldflutter-textformfield

how to limit the user to enter number outside the given range(says 1 to 4000) in flutter textformfield


Restricts the user's input. For example, if I set the numeric limit to 4000, the user cannot enter a number greater than 4000.

TextFormField(
                //TODO:보유수량 이상 쓰는것 방지할것.
                controller: _recruitStockEditingController,
                keyboardType: TextInputType.number,
                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                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))),
              ),

Solution

    1. Try this with TextInputFormatter

      import 'package:flutter/services.dart';

       class NumberLimitFormatter extends TextInputFormatter {
         @override
         TextEditingValue formatEditUpdate(TextEditingValue oldValue, TextEditingValue newValue) {
           if(newValue.text == "") return newValue;
           if(int.parse(newValue.text.toString())<4000){
             return newValue;
           }
           return oldValue;
         }
       }
      

    Uasge:

    TextField(
                  controller: myController,
                    keyboardType: TextInputType.number,
                    inputFormatters: [
                      NumberLimitFormatter(),
                      FilteringTextInputFormatter.digitsOnly,
                     ],
                ),
    
    1. Using Validator and TextFormField:
     TextFormField(
            keyboardType: TextInputType.number,
            autovalidateMode: AutovalidateMode
                .onUserInteraction, // to instantly valid the input
            inputFormatters: [
              FilteringTextInputFormatter.digitsOnly,
            ],
            validator: (String? value) {
              if (value == null || value.isEmpty)
                return "Enter number";
              else if (int.parse(value) > 4000)
                return "Entered number can't be greater than 4000";
              else
                return null;
            }),