Flutter - Set Keyboard Type of TextField/TextFormField

This tutorial shows you how to set the keyboard type of a TextField or 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:

  • text
  • multiline
  • number
  • phone
  • datetime
  • emailAddress
  • url
  • visiblePassword
  • name
  • streetAddress
  • none

Below is a usage example for TextField.

  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.

Text Input

This is the type for general text information.

Flutter - Keyboard Type - Text

Multiline Input

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.

Flutter - Keyboard Type - Multiline

Number Input

This type is optimized for inputting numbers. The number keys are shown bigger, making it more comfortable to input numbers.

Flutter - Keyboard Type - Number

Phone Input

This type is optimized for inputting phone numbers. It shows a keyboard with number keys, "&", and "#".

Flutter - Keyboard Type - Phone

Datetime Input

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.

Flutter - Keyboard Type - Datetime

EmailAddress Input

This type is optimized for inputting email addresses by including "@" and "." keys.

Flutter - Keyboard Type - Email Address

URL Input

This type is optimized for inputting URL addresses by including "/" and "." keys.

Flutter - Keyboard Type - URL

Visible Password Input

This type is for inputting passwords that are visible to the user. The keyboard has access to both letters and numbers.

Flutter - Keyboard Type - Visible Password

Name Input

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.

Flutter - Keyboard Type - Name

StreetAddress Input

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.

Flutter - Keyboard Type - Street Address

None Input

If you use this type, there will be no keyboard shown.

Flutter - Keyboard Type - None

Summary

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: