How to create a number input field in Flutter?

Hello Guys. How are you all ? Hope you all are fine. In this tutorial we are going to learn How to create number input field in Flutter? in Easiest way. so without wasting your time lets start this article.

How to create number input field in Flutter?

• Step 1. Create a TextField
• Step 2. Add keyboardType.
• Step 3. Restrict another char without a number

Step 1: Create a TextField

First of all lets create TextField. Just follow my code. I am just added decoration and Controller there for design.

             TextField(
                controller: mycontroller,
                decoration: InputDecoration(
                  labelText: 'Enter Your Phone number',
                  hintText: '+91 7894561230',
                ),
              ),

Step 2: Add keyboardType

Now just add keyboardType property in the TextField As like below. This will force keyboard to open numeric keyboard.

             TextField(
                controller: mycontroller,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                  labelText: 'Enter Name',
                  hintText: 'Enter Your Name',
                ),
              ),

Step 3: Restrict another char without a number

By adding keyBoardType it will only open numeric keyboard but it will allow users to add +,* all sybmol like that. If you only want numeric value there then you have to use validator. Explore below example.

First of all Import services.dart

import 'package:flutter/services.dart';

Digit only TextField in Flutter

Now just add inputFormatters property in TextField.

             TextField(
                controller: mycontroller,
                keyboardType: TextInputType.number,
                inputFormatters: [
                  FilteringTextInputFormatter.digitsOnly,
                ],
                decoration: InputDecoration(
                  labelText: 'Enter Name',
                  hintText: 'Enter Your Name',
                ),
              ),

Thats it. Now you are not able to add any character expects numbers.

Faq

Summery

So, It’s All About How to create a number input field in Flutter?. I hope this tutorial helps you to solve your error. Please Comment Below if You stucks anywhere with my code.

Also Check Out Below Tutorials

• CERTIFICATE_VERIFY_FAILED: unable to get local issuer certificate in flutter
• SocketException: OS Error: Connection refused, errno = 111 in flutter
• No MediaQuery widget found in flutter
• Execution failed for task ‘:app:mergeDexDebug’ in flutter
• The parameter ‘key’ can’t have a value of ‘null’ because of its type, and no non-null default value is provided