US Office

1176 Shadeville Rd, Crawfordville Florida 32327, USA

 +1 (850) 780-1313

India Office

Office No 405, Kabir Shilp, Opp. Kansar Hotel, Opp. Landmark, Kudasan, Gandhinagar, Gujarat 382421

[email protected]

How to Create Number Inputfield in Flutter?

Number Input Field 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:

    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.



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:) is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc. 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.

Post a Comment