How to create a number input field in Flutter

Flutter TextField is the most popular widget for getting input from the user. The TextField Widget has tons of customization. We can easily customize the TextField depending upon our needs by using decoration property.

In this blog, you will learn how to create a number input field in a flutter. So let’s get started.

Flutter Creating Number Input Field

First, create a TextField widget.


In the TextField widget keyboardType property supply the TextInputType.number. To prevent inserting characters in the TextField use the inputFormatters property. The inputFormatters property accepts a list of formators. Then, import the services package and supply the FilteringTextInputFormatter.digitsOnly to the inputFormatters list. The example code is given below.

TextField( <strong> keyboardType: TextInputType.number, inputFormatters: [FilteringTextInputFormatter.digitsOnly],</strong> ),
Code language: HTML, XML (xml)

To decorate the text field you can use decoration property. In this tutorial, I skipped the text field decoration like the label, border, etc. That’s all.

How to create a number input field in Flutter

Don’t forget to read the TextWidget and its properties. A deep drive tutorial.