How To Customize Flutter Textfield KeyboardType [Easy Explanation]

In this tutorial, we’ll learn how to properly customize Flutter textfield keyboardType by using practical Flutter code examples.

What is Flutter Textfield KeyboardType?

As the name suggests, it specifies the keyboard type that popup whenever a Flutter textfield is tapped or focused. Customizing keyboard type of Flutter textfield means that we can set whether we want to see only numbers or other type of keyboard etc. Let’s start understanding it using a proper example code.

Default Flutter Textfield KeyboardType

First we will see what the default Flutter textfield keyboardtype is. For that we have to implement a Flutter textfield and taps on it so the keyboard can appear. See the below code for this:

TextField()

You can see that I have implemented a simple Flutter textfield without any customization. In the image above, you can see that the keyboard is appeared and this is the default Flutter textfield keyboardtype.

Changing Flutter Textfield KeyboardType

Let’s now change the Flutter textfield keyboardtype. For that, you have to use the keyboard type constructor of the Flutter textfield, it takes a text input type class and using its properties, we can specify the type of keyboard that we want to show when the user clicks on Flutter textfield.

Let’s specify Flutter textfield keyboardtype to only take numbers. For that you have to use the number property of the text input type class which is implemented in the below code:

 keyboardType: TextInputType.number,

In the above image, you can see that the Flutter textfield keyboardtype is now set to show only numbers, it can be used to take input like for pin code etc. If the keyboard change is not showing then just hot restart the app and it will word just fine.

We have other options as well like email address, phone numbers which you can test and use depending on your set of requirements. See the below code for both phone and email address.

For phone

keyboardType: TextInputType.phone

For Email Address

 keyboardType: TextInputType.emailAddress

flutter textfield keyboard type email address

Congrats, hope you now have a complete practical knowledge of how to change Flutter textfield keyboardType in Flutter textfield.

Hot restart whenever you change the type of keyboard.

The complete source code of Flutter textfield with custom keyboardType is given in the next section.

Custom Flutter Textfield KeyboardType Source Code

flutter textfield keyboardtype

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: TextField(
                keyboardType: TextInputType.emailAddress,
              ))),
    ));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter textfield keyboardType. 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.