我想确保用户只能在 TextFormField Flutter 中输入 1 - 10 的数字

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

Answer 1

you can update your validator function as follows

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

   return null;
},

Answer 2

you can try with form and for digit validation, you need to parse the string to int

Form(
        key: _formKey,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextFormField(
              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",
              ),
              validator: (text) {
                if (text == null || text.isEmpty) {
                  return 'Text is empty';
                }
                if (int.parse(text) < 1 || int.parse(text) > 10) {
                  return 'The rating must be between 1 and 10';
                }
                return null;
              },
            ),
            TextButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  // TODO submit
                }
              },
              child: Text('Submit'),
            )
          ],
        ),
      )

Answer 3

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

Answer 4

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$'),
),],