Flutter allows you to accept the user input using the TextField widget which is a very common widget in Flutter. Sometimes you may need user input only in numbers, for example, accepting phone numbers, entering price and quantity, etc. By default, the TextField widget doesn’t show a numeric keyboard. So in this tutorial, we’ll learn how to show a numeric input keyboard in Flutter.
Here’s what we’ll cover:
- How to Show Numeric Input Keyboard in Flutter
- Allow Decimal value
- Accepting Phone Number
- Showing Done Button
- Closing Keyboard
- Full Code
How to Show Numeric Input Keyboard in Flutter
The numeric input keyboard is shown by setting the keyboard type to a number and allowing users to enter only digits.
Steps to show numeric input keyboard in Flutter
Step 1: Add TextField widget to your dart file.
Step 2: Add keyboardType parameter and assign the TextInputType.number.
Step 3: Add inputFormatters parameter and assign the [FilteringTextInputFormatter.digitsOnly] to it.
Step 4: Run the app.
Here is how your code should look like:
TextField( decoration: InputDecoration(labelText: 'Enter Number'), keyboardType: TextInputType.number, inputFormatters: [FilteringTextInputFormatter.digitsOnly], )
Output:

Allow Decimal value
Sometimes you may need to allow users to enter a decimal value for accepting a price such as 12.34$ or entering a percentage such as 43.4%.
To allow decimal value:
- Add the keyboardType parameter and assign TextInputType.numberWithOptions(decimal: true) to the TextField widget.
- Add the inputFormatters parameter and assign [FilteringTextInputFormatter.allow(RegExp(‘[0–9.,]’)),] to the TextField widget.
Code:
TextField( decoration: InputDecoration(labelText: 'Enter Number'), keyboardType: TextInputType.numberWithOptions(decimal: true), inputFormatters: [ FilteringTextInputFormatter.allow(RegExp('[0-9.,]')), ], )
Output:

Accepting Phone Number
To accept a phone number from a user:
- Add the keyboardType parameter and assign TextInputType.phone to the TextField widget.
Code:
TextField( decoration: InputDecoration(labelText: 'Enter Number'), keyboardType: TextInputType.phone, )
Output:

Showing Done Button
If you notice carefully, you see the done button in Android but not in iOS.
To add done button in iOS:
- Detect if the current platform in iOS using the instructions here.
- If the platform is iOS, assign the TextInputType.numberWithOptions(decimal: true, signed: true) otherwise TextInputType.number to keyboardType parameter.
Code:
TextField( decoration: InputDecoration(labelText: 'Enter Number'), keyboardType: defaultTargetPlatform == TargetPlatform.iOS ? TextInputType.numberWithOptions(decimal: true, signed: true) : TextInputType.number, inputFormatters: [FilteringTextInputFormatter.digitsOnly], )
Output:

Hint: You can also use a library for adding a done button in iOS here.
Closing Keyboard
If you don’t want users to click on the Done button to close the keyboard. Instead, you want to allow them to dismiss the keyboard on clicking outside the TextField, follow the quick instructions here.
Full code
Here it is:
import 'package:flutter/material.dart'; import 'numeric_keyboard/numeric_keyboard_demo.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/services.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: NumericKeyboardDemo(), ); } } class NumericKeyboardDemo extends StatelessWidget { const NumericKeyboardDemo({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return GestureDetector( onTap: () { FocusManager.instance.primaryFocus?.unfocus(); }, child: Scaffold( appBar: AppBar( centerTitle: true, title: Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Image.asset( 'assets/images/logo.png', scale: 12, ), const SizedBox( width: 10, ), const Text( 'FlutterBeads', style: TextStyle(color: Colors.black), ), ], ), backgroundColor: const Color(0xff6ae792), ), body: Column( children: [ TextField( decoration: InputDecoration(labelText: 'Enter Number'), keyboardType: TextInputType.number, inputFormatters: [FilteringTextInputFormatter.digitsOnly], ), TextField( decoration: InputDecoration(labelText: 'Enter Decimal value'), keyboardType: TextInputType.numberWithOptions(decimal: true), inputFormatters: [ FilteringTextInputFormatter.allow(RegExp('[0-9.,]')), ], ), TextField( decoration: InputDecoration(labelText: 'Enter phone number'), keyboardType: TextInputType.phone, ), TextField( decoration: InputDecoration(labelText: 'Enter Number'), keyboardType: defaultTargetPlatform == TargetPlatform.iOS ? TextInputType.numberWithOptions(decimal: true, signed: true) : TextInputType.number, inputFormatters: [FilteringTextInputFormatter.digitsOnly], ) ], ), ), ); } }
Thanks!
Conclusion
In this tutorial, we learned how to show a numeric input keyboard in Flutter with a practical example. We also saw how to allow decimal values and phone numbers in a numeric keyboard in Flutter.
Take a look at other interesting Flutter tutorials.