Showing Numeric Input Keyboard in Flutter with Code

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.