This tutorial shows you how to set the keyboard type of a
TextFormField in Flutter.
If your application has a text input field, showing the appropriate keyboard type may help the users to type more efficiently. For example, if a field is for inputting an email address, showing a keyboard with "@" and "." symbol enables users to input the email faster. In addition, it may also prevent users from inputting unexpected characters. For example, if a field only accepts numeric values, the keyboard should not show keys that's not used to construct a number.
Set TextField Keyboard Type
If you create the field using a
TextField or a
TextFormField, there is an argument named
keyboardType. To use the argument, you have to pass a
TextInputType value. The
TextInputType has some static constants that you can use to get an instance of it. The constants are:
Below is a usage example for
TextField( keyboardType: TextInputType.emailAddress, // Other arguments )
The usage for
TextFormField is very similar.
TextFormField( keyboardType: TextInputType.emailAddress, // Other arguments )
Below you can see how the keyboard looks for each type.
This is the type for general text information.
This type is optimized for input with multiline support. It shows the default keyboard and enables the user to add newlines by pressing the enter key. To allow multiline input, the
maxLines argument has to be set as well.
This type is optimized for inputting numbers. The number keys are shown bigger, making it more comfortable to input numbers.
This type is optimized for inputting phone numbers. It shows a keyboard with number keys, "&", and "#".
This type is optimized for inputting date and time information. On Android, it shows a keyboard with number keys, ":", and "-". On iOS, it shows the default keyboard.
This type is optimized for inputting email addresses by including "@" and "." keys.
This type is optimized for inputting URL addresses by including "/" and "." keys.
Visible Password Input
This type is for inputting passwords that are visible to the user. The keyboard has access to both letters and numbers.
This type is optimized for inputting a person's name. On Android, it shows a keyboard optimized for
TYPE_TEXT_VARIATION_PERSON_NAME. On iOS, it shows the
UIKeyboardType.namePhonePad keyboard, which is optimized for entering a person’s name or phone number.
This type is used to show a keyboard optimized for postal mailing addresses. On Android, it shows a keyboard optimized for
TYPE_TEXT_VARIATION_POSTAL_ADDRESS. On iOS, it shows the default keyboard.
If you use this type, there will be no keyboard shown.
The keyboard type to be shown for a
TextField or a
TextFormFiled can be set by using the
keyboardType argument whose type is
TextInputType. You can choose one from the static constants. The displayed keyboard may be affected by some factors too such as the platform and which keyboard app is used on the device.
You can also read about: