How to create number input field in Flutter?

In this article, we will learn how to create a number input field in Flutter. This is useful when you want the user to enter only numbers as input.

Method 1: Using keyboardType

You can specify the number as keyboardType for the TextField using:

keyboardType: TextInputType.number

This will allow the user to enter numbers, but it does not prevent non-numeric characters from being entered. To prevent non-numeric characters from being entered, you need to use inputFormatters.

Method 2: Using inputFormatters

For Flutter versions 1.20 or newer, you can use the following code:

TextFormField(
  controller: _controller,
  keyboardType: TextInputType.number,
  inputFormatters: [
    FilteringTextInputFormatter.digitsOnly
  ],
  decoration: InputDecoration(
    labelText: "whatever you want",
    hintText: "whatever you want",
    icon: Icon(Icons.phone_iphone)
  )
)

For earlier versions of Flutter, you can use the following code:

TextFormField(
  controller: _controller,
  keyboardType: TextInputType.number,
  inputFormatters: [
    WhitelistingTextInputFormatter.digitsOnly
  ],
  decoration: InputDecoration(
    labelText:"whatever you want", 
    hintText: "whatever you want",
    icon: Icon(Icons.phone_iphone)
  )
)

Main.dart file

Here is an example of a main.dart file that uses the above code:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new MaterialApp(
      home: new HomePage(),
      theme: new ThemeData(primarySwatch: Colors.blue),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  State createState() {
    return new HomePageState();
  }
}

class HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white,
      body: new Container(
        padding: const EdgeInsets.all(40.0),
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new TextField(
              decoration: new InputDecoration(labelText: "Enter your number"),
              keyboardType: TextInputType.number,
              inputFormatters: [
                FilteringTextInputFormatter.digitsOnly
              ], // Only numbers can be entered
            ),
          ],
        ),
      ),
    );
  }
}

Example for earlier versions of Flutter

If you are using an earlier version of Flutter, you can use the following code:

TextFormField(
  controller: _controller,
  keyboardType: TextInputType.number,
  inputFormatters: [
    WhitelistingTextInputFormatter.digitsOnly
  ],
  decoration: InputDecoration(
    labelText:"whatever you want", 
    hintText: "whatever you want",
    icon: Icon(Icons.phone_iphone)
  )
)

Remember to import services.dart when using FilteringTextInputFormatter.

import 'package:flutter/services.dart';

Credits and notes

The code used in this article is from various sources, including the official Flutter documentation and Stack Overflow questions. For those who are looking for making TextField or TextFormField accept only numbers as input, try this code block:

TextFormField(
  controller: _controller,
  keyboardType: TextInputType.number,
  inputFormatters: [
    FilteringTextInputFormatter.allow(RegExp(r'[0-9]')), 
    FilteringTextInputFormatter.digitsOnly
  ],
  decoration: InputDecoration(
    labelText: "whatever you want",
    hintText: "whatever you want",
    icon: Icon(Icons.phone_iphone)
  )
)

For those who are using earlier versions of Flutter, use the following code:

TextFormField(
  controller: _controller,
  keyboardType: TextInputType.number,
  inputFormatters: [
    WhitelistingTextInputFormatter.digitsOnly
  ],
  decoration: InputDecoration(
    labelText:"whatever you want", 
    hintText: "whatever you want",
    icon: Icon(Icons.phone_iphone)
  )
)

Note that you need to import services.dart when using FilteringTextInputFormatter.