I want to make sure that users can put numbers only from 1 - 10 in TextFormField Flutter

Question

This is the code for the textformfield I want to restrict. Users should only be able to enter values from 1-10 but I cant find how to implement that

       TextFormField(
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Please enter the Overall Rating';
                  }
                  return null;
                },
                keyboardType: TextInputType.number,
                inputFormatters: <TextInputFormatter>[
                  FilteringTextInputFormatter.digitsOnly
                ], // Only numbers can be entered
                maxLength: 2,
                maxLengthEnforced: true,
                controller: overall,
                decoration: InputDecoration(
                    hintText: "Overall Rating  Out of /10",
                ),
              ),

Solution 1

if you want to check the given string is a less than 11 you can do it with the help you a validator. but when using a validator you need to perform a trigger or an event need to take place If you want to run your code that way you can use this code ...

Code with using validator(Using tigger or even)

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class Textfi extends StatelessWidget {
  Textfi({Key? key}) : super(key: key);
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: _formKey,
        child: Column(children: [
          const SizedBox(
            height: 70,
          ),
          TextFormField(
            validator: (value) {
              if (value!.isEmpty) {
                return 'Please enter the Overall Rating';
              } else if (int.parse(value) < 1 || int.parse(value) > 10) {
                return 'The rating must be between 1 and 10';
              }
              return null;
            },
            keyboardType: TextInputType.number,

            inputFormatters: <TextInputFormatter>[
              FilteringTextInputFormatter.digitsOnly
            ], // Only numbers can be entered
            maxLength: 2,
            maxLengthEnforced: true,

            decoration: const InputDecoration(
              hintText: "Overall Rating  Out of /10",
            ),
          ),
          GestureDetector(
            onTap: () {
              if (_formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Validation done')),
                );
              }
            },
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Container(
                height: 30,
                width: 80,
                color: Colors.blue,
                child: const Center(child: Text("Submit")),
              ),
            ),
          )
        ]),
      ),
    );
  }
}

If you want to check the value in real time

you can't use a validator you need to restrict your input value the only way to do that is using inputFormatters:

in your case you are using inputFormatter as:

 inputFormatters: <TextInputFormatter>[
              FilteringTextInputFormatter.digitsOnly
            ], 

which will only input digits

If you want to input a restricted number you need to make use of Regex

for that change your

inputFormatters: <TextInputFormatter>[
              FilteringTextInputFormatter.digitsOnly
            ], 

to

 inputFormatters: <TextInputFormatter>[    
              FilteringTextInputFormatter.allow(RegExp("^(1[0-0]|[1-9])\$")),
            ],

This will help you to only enter only numbers from 1 to 10 : -

RegExp("^(1[0-0]|[1-9])$")

**Full code **

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class Textfi extends StatelessWidget {
  Textfi({Key? key}) : super(key: key);
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Form(
        key: _formKey,
        child: Column(children: [
          const SizedBox(
            height: 70,
          ),
          TextFormField(
            validator: (value) {
              if (value!.isEmpty) {
                return 'Please enter the Overall Rating';
              } else if (int.parse(value) < 1 || int.parse(value) > 10) {
                return 'The rating must be between 1 and 10';
              }
              return null;
            },
            keyboardType: TextInputType.number,
            inputFormatters: <TextInputFormatter>[
              FilteringTextInputFormatter.allow(RegExp("^(1[0-0]|[1-9])\$")),
            ],
            // inputFormatters: <TextInputFormatter>[
            //   FilteringTextInputFormatter.digitsOnly
            // ], // Only numbers can be entered
            maxLength: 2,
            maxLengthEnforced: true,

            decoration: const InputDecoration(
              hintText: "Overall Rating  Out of /10",
            ),
          ),
          GestureDetector(
            onTap: () {
              if (_formKey.currentState!.validate()) {
                ScaffoldMessenger.of(context).showSnackBar(
                  const SnackBar(content: Text('Validation done')),
                );
              }
            },
            child: Padding(
              padding: const EdgeInsets.all(20.0),
              child: Container(
                height: 30,
                width: 80,
                color: Colors.blue,
                child: const Center(child: Text("Submit")),
              ),
            ),
          )
        ]),
      ),
    );
  }
}

Solution 2

inside the inputFormatters : you simply put below express and this should work...

// regex expression to accept number only from 1-10

inputFormatters: [  
FilteringTextInputFormatter.allow(RegExp(r'^[1-9]$|^10$'),
),],

Solution 3

you can update your validator function as follows

validator: (value) {
   if (value.isEmpty) {
     return 'Please enter the Overall Rating';
   }
   if(int.parse(value) < 1 || int.parse(value) > 10) {
      return 'The rating must be between 1 and 10';
   }

   return null;
},

Comments

[Saaimah Patel]

It gives me an error for the '<' and '>' . The error is The operator '<' isn't defined for the type 'String'.

[Alan Bosco]

have you tried this?

[Saaimah Patel]

Thank you so much. This worked for me. Apologies for the late response. My android studio was giving me issues so I had to reinstall it

[Alan Bosco]

can you make this answer acceptable (as correct )

[Saaimah Patel]

sure sure. Sorry about that. I forgot. Thanks again

[Alan Bosco]

can you also upvote the answer so that more people can make use of the answer

[Devon Ray]

@SaaimahPatel I've updated the answer.