How To Set Flutter Textformfield Only Numbers [Detailed Flutter Example Code]

flutter textformfield only numbers

In this tutorial, we’ll learn how to properly implement Flutter textformfield only numbers by using practical Flutter code examples.

Introduction: Flutter Textformfield Only Numbers

By default the input value that a user give to the Flutter textformfield is a string, means it can be text, characters, special characters, numbers etc.

What if we want only numbers to be inputted by the user. We can specify that so our Flutter textformfield will only take numbers.

Let’s first see the default input type of textformfield. After that, we’ll set the input type to only numbers.

Default Flutter Textformfield Input Type

For that, we’ve to implement a simple Flutter textformfield widget. See below code

TextFormField()
flutter textformfield default input type
We haven’t specified any input type. In the image above, we can see that the default input type is a combination of all the types, like numbers, characters, special characters etc.

Implementing Flutter Textformfield Only Numbers

Let’s now implement Flutter textformfield only numbers so the input that the user provides will be of type number.

For that, we’ve to use the keyboard type constructor of Flutter textformfield widget. Then by passing it the text input type class and accessing its number property, we can easily set the Flutter textformfield input type to numbers.

Make sure to hot restart the app after changing the keyboard type to get the expected results.

keyboardType: TextInputType.number
flutter textformfield only numbers
We can see in the above image that the keyboard shows only numbers which means Flutter textformfield only numbers is successfully implemented.
You can also use other types of input of the text input type class like phone number, email address etc.
The complete source code in which Flutter textformfield only numbers is implemented is given in the next section.

Flutter Textformfield Only Numbers Source Code

flutter textformfield only numbers

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
                child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 40),
                    child:
                        TextFormField(keyboardType: TextInputType.number)))));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to implement Flutter textformfield only numbers. I’d love to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.

Leave a Comment

Your email address will not be published.