How to Create Number Inputfield in Flutter?

How to Create Number Inputfield in Flutter?

In a Flutter Mobile Application while submitting a form you may have seen some TextField Widget accept the only number as an input so we will go through How to Create Number Inputfield in Flutter

How to Create Number Inputfield in Flutter?

You can specify the number as keyboard type for the TextField Widget using:

keyboardType: TextInputType.number

Through this option, you can strictly restrict another char without a number.

inputFormatters: [FilteringTextInputFormatter.digitsOnly],
keyboardType: TextInputType.number,

For using the above option you have to import this.

import 'package:flutter/services.dart';

Using this kind of option user can not paste char in a Textfield.

Users can also create a custom function like below:

String numberValidator(String value) {
  if(value == null) {
    return null;
  }
  final n = num.tryParse(value);
  if(n == null) {
    return '"$value" is not a valid number';
  }
  return null;
}

Use the above function in TextField Widget Validator like below:

TextField(
    keyboardType: TextInputType.number, 
    validator: numberValidator, 
    textAlign: TextAlign.right
    ...
    )

Here is the code for the numeric keyboard :

When you add this code in Textfield Widget it will open a Numeric keyboard.

keyboardType: TextInputType.phone

Conclusion:

So in this article, we have learned about How to Create Number Inputfield in Flutter.

Thanks for Reading!!!
Keep Learning!!! Keep Fluttering!!!

Do let us know if you need any assistance with Flutter? we’ll assist you:)

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.