Flutter TextField Set Numeric Keypad Input Only

The default TextField selection keyboard type is multi functional. Where we can enter Text, special symbols and numeric value also. We can set keyboard type in flutter with keyboardType property. It allow us to open a specific keyboard type when user focus on TextField though user will enter only numeric value.

Flutter TextField Set Numeric Keypad Input Only

1. Creating TextField widget with keyboardType: TextInputType.number property.

TextField(
	  controller: inputController,
	  keyboardType: TextInputType.number,
	  decoration: const InputDecoration(
		  hintText: 'Enter Phone Number...',
		  enabledBorder: border,
		  focusedBorder: focusBorder),
	)

Screenshot:

Source code main.dart file:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    final inputController = TextEditingController();

    const border = OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(12.0)),
      borderSide: BorderSide(color: Colors.blueGrey, width: 1.8),
    );

    const focusBorder = OutlineInputBorder(
        borderRadius: BorderRadius.all(Radius.circular(8.0)),
        borderSide: BorderSide(color: Colors.green, width: 1.8));

    return MaterialApp(
        home: Scaffold(
            body: Center(
                child: Container(
                    margin: const EdgeInsets.all(10),
                    child: TextField(
                      controller: inputController,
                      keyboardType: TextInputType.number,
                      decoration: const InputDecoration(
                          hintText: 'Enter Phone Number...',
                          enabledBorder: border,
                          focusedBorder: focusBorder),
                    )))));
  }
}