This example shows you how to set keyboard type on TextField
in Flutter.
TextField
has keyboardType
parameter.
TextField( keyboardType: , )
Name:
TextField( decoration: InputDecoration( labelText: 'Name' ), keyboardType: TextInputType.name, )
![](https://easy-devs.com/wp-content/uploads/2023/01/image-711x1024.png)
![](https://easy-devs.com/wp-content/uploads/2023/01/image-1-743x1024.png)
Email:
TextField( decoration: InputDecoration( labelText: 'Email' ), keyboardType: TextInputType.emailAddress, )
![](https://easy-devs.com/wp-content/uploads/2023/01/image-2-695x1024.png)
![](https://easy-devs.com/wp-content/uploads/2023/01/image-3-747x1024.png)
Phone number:
TextField( decoration: InputDecoration( labelText: 'Phone number' ), keyboardType: TextInputType.phone, )
![](https://easy-devs.com/wp-content/uploads/2023/01/image-4-712x1024.png)
![](https://easy-devs.com/wp-content/uploads/2023/01/image-5-753x1024.png)
Datetime:
TextField( decoration: InputDecoration( labelText: 'Datetime' ), keyboardType: TextInputType.datetime, )
![](https://easy-devs.com/wp-content/uploads/2023/01/image-6-717x1024.png)
![](https://easy-devs.com/wp-content/uploads/2023/01/image-7-745x1024.png)
Full source code:
import 'package:flutter/material.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State<MyHomePage> createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Padding( padding: const EdgeInsets.all(20), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Row( children: const [ Expanded( child: TextField( decoration: InputDecoration(labelText: 'Name'), keyboardType: TextInputType.name, ), ) ], ), Row( children: const [ Expanded( child: TextField( decoration: InputDecoration(labelText: 'Email'), keyboardType: TextInputType.emailAddress, ), ) ], ), Row( children: const [ Expanded( child: TextField( decoration: InputDecoration(labelText: 'Phone number'), keyboardType: TextInputType.phone, ), ) ], ), Row( children: const [ Expanded( child: TextField( decoration: InputDecoration(labelText: 'URL'), keyboardType: TextInputType.url, ), ) ], ), Row( children: const [ Expanded( child: TextField( decoration: InputDecoration(labelText: 'Datetime'), keyboardType: TextInputType.datetime, ), ) ], ), Row( children: const [ Expanded( child: TextField( decoration: InputDecoration(labelText: 'Number'), keyboardType: TextInputType.number, ), ) ], ), ], ), ), ), ); } }