How to Change Keyboard Type of TextField in Flutter

The TextField widget is a very important widget in flutter which lets users to give inputs. The input types the user gives can be varied. For example, if you are entering a phone number then you only wants to see numbers in your keyboard. In this Flutter tutorial, let’s see how to change keyboard type while using TextField in Flutter.

We use TextInputType class to mention the keyboard we want. If you don’t know how to add TextField then please read this blog post.

For example, if you want a phone number keyboard type in flutter then you can mention as value to keyboardType attribute.

TextField(
          controller: myController,
          keyboardType: TextInputType.phone,
        ),

This will be look like as given below.

Like this you can choose other keyboard type such as datetime, emailAddress, name, number, streetAddress, text, url etc.

Following is the complete example of flutter TextField keyboard type where I use a emailAddress keyboard type.

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Keyboard Type Example',
      home: MyInput(),
    );
  }
}

// Define a custom Form widget.
class MyInput extends StatefulWidget {
  @override
  _MyInputState createState() => _MyInputState();
}

// Define a corresponding State class.
// This class holds the data related to the Form.
class _MyInputState extends State<MyInput> {
  // Create a text controller and use it to retrieve the current value
  // of the TextField.
  final myController = TextEditingController();

  @override
  void dispose() {
    // Clean up the controller when the widget is disposed.
    myController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter keyboard type tutorial'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Center(child: TextField(
          controller: myController,
          keyboardType: TextInputType.emailAddress,
        ),
      ),
      ),   
    );
  }
}

Following is the output.

Leave a Comment

Your email address will not be published. Required fields are marked *