How to Change Keyboard Type Input on TextField in Flutter

In this exampe, we are going to show you the way to change the keyboard input type in TextField widget in Flutter App. You can set to email address, number, URL, name, street address input keyboard according to the data type of TextField widget.

Set Keyboard type to Number Input on TextField:

TextField( 
  keyboardType: TextInputType.number,
)

Set Keyboard type to Email Address Input on TextField:

TextField( 
  keyboardType: TextInputType.emailAddress,
)

Set Keyboard type to Datetime Input on TextField: 

TextField( 
  keyboardType: TextInputType.datetime,
)

Set Keyboard type to Phone Number Input on TextField:

TextField( 
  keyboardType: TextInputType.phone,
)

Full Code Example:

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget{
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  TextEditingController myinput = TextEditingController();
  @override
  void initState() {
    myinput.text = ""; //innitail value of text field
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          appBar: AppBar( 
             title: Text("Keyboard Type on TextField"),
             backgroundColor: Colors.deepOrangeAccent,
          ),
          body: Container(
            padding: EdgeInsets.all(20),
            child: Center( 
              child: TextField( 
                controller: myinput,
                keyboardType: TextInputType.phone,
              ),
            ),
          )
       );
  }
}

In this way, you can change the keyboard type input on TextField() widget on Flutter App.