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

Question

Asked by Saaimah P on November 21, 2021 (source).

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",
                ),
              ),

Answer

Question answered by Alan B (source).

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")),
              ),
            ),
          )
        ]),
      ),
    );
  }
}

FLUTTER VALIDATION
SHARE: