Flutter Get Only Numeric Number Value From TextField Text Input

TextField widget has a property named as keyboardType which support a argument TextInputType.number. Using this method we can easily change behavior of Keypad of both android and iOS devices. TextInputType.number method allows us to open only Number type keyboard when TextField widget is selected. So in this tutorial we would Flutter Get Only Numeric Number Value From TextField Text Input Widget Android iOS Example Tutorial.

Contents in this project Flutter Get Only Numeric Number Value From TextField Text Input Widget Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Create void main runApp() method and here we would call our main Root MyApp class.

3. Create our main Root Class named as MyApp extends with StatelessWidget. In this class we would call another class named as TextFieldNumeric().

4. Creating a class named as TextFieldNumeric extends StatefulWidget. In this class we would make createState() method and pass next class NumericTextFieldWidget name along with it.

5. Creating another class named as NumericTextFieldWidget extends State. This class is our main Children class in which we would make the TextField widget.

6. Creating a final type number variable TextEditingController() to get entered value from Text Field widget.

7. Creating Scaffold widget -> Center widget -> Column widget -> Container widget -> TextField widget.

  • keyboardType : TextInputType.number – To enable only Number value Keypad.

8. Complete source code for main.dart file:

Screenshots:

Flutter Get Only Numeric Number Value From TextField Text Input

2 Comments

  1. What if the value was empty, how do you handle the error?

    • then use a validoator property in TextFormField like,
      validator: (String value){
      if (value.isempty)
      return “fill the required info”;
      }

Leave a Reply

Your email address will not be published.