Open In App

Flutter – Creating Number Input Field

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, you will see how to create a number input field that takes only numbers from the keyboard. This helps you when you have to take the user input only the numbers. A sample video is given below to get an idea about what we are going to do in this article.

Approach

To make a number input text field, we can Simply use the Text field, and then we have to change the two things.

1. keyboard Type should be number, because if we need only a number in the text field then we only need a number keyboard, not an alphabet. 

keyboardType: TextInputType.number,

2. Now set the input formatters to digit only. This will restrict only input numbers.

inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.digitsOnly
                  ], // Only numbers can be entered

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the material package that gives us the important methods and then call the runApp method in the main function that will call our application.

import 'package:flutter/material.dart';
void main() {
   runApp(RunMyApp());
}

Step 3: Now we have to make a stateless widget RunMyApp Because our application does not go to change its state and then return the MaterialApp widget which allows us the set the title and theme and many more.

class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
 return MaterialApp(home:);
    }
}

Step 4: Give the home property and there can be a scaffold widget that has the property of AppBar and body. AppBar allows us to give the title of AppBar, color, leading, and trailing icon. And then in the body create an Input text field, which further gives the property keyboard type and input formatters.

body:  Container(
           padding: const EdgeInsets.all(450),
           child:  Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: [
                TextField(
                 decoration: InputDecoration(labelText: "Enter your number"),
                 keyboardType: TextInputType.number,
                 inputFormatters: <TextInputFormatter>[
                   FilteringTextInputFormatter.digitsOnly
                 ], // Only numbers can be entered
               ),
             ],
           )),

Final Code

Dart




import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
  
void main() {
  runApp(RunMyApp());
}
  
class RunMyApp extends StatelessWidget {
  const RunMyApp({super.key});
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(primarySwatch: Colors.green),
      home: Scaffold(
        appBar: AppBar(title: Text('Number Input Field'),),
        body:  Container(
            padding: const EdgeInsets.all(450),
            child:  Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                 TextField(
                  decoration: InputDecoration(labelText: "Enter your number"),
                  keyboardType: TextInputType.number,
                  inputFormatters: <TextInputFormatter>[
                    FilteringTextInputFormatter.digitsOnly
                  ], // Only numbers can be entered
                ),
              ],
            )),
      ),
    );
  }
}


Output:

Note: The application is running on a desktop device, which is why the keyboard is not visible, but it takes only number input. If you want to check the number keyboard, then you have to run the application in an emulator or in an Android or IOS device.



Last Updated : 31 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads