close

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

  1. How to create a number input field in Flutter?

    To create a number input field in Flutter you just need to add inputFormatters property in TextField and add FilteringTextInputFormatter as DigitOnly property.

  2. create a number input field in Flutter

    To create a number input field in Flutter you just need to add inputFormatters property in TextField and add FilteringTextInputFormatter as DigitOnly property.

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

Leave a Comment

%d bloggers like this: