19 December 2024 Leave a comment Tech-Help
When developing mobile applications using Flutter, it is often necessary to create input fields that accept only numeric values. This is particularly useful for fields that require phone numbers, amounts, or other numerical data. In this guide, we’ll explore how to implement a number input field in Flutter using the TextField or TextFormField widgets.
Implementing a Numeric Input Field
To create a text field that accepts only numbers, you can use the keyboardType and inputFormatters properties of the TextField or TextFormField widget. Here’s a step-by-step guide:
Step 1: Set the Keyboard Type
The first step is to set the keyboardType property to TextInputType.number. This ensures that the numeric keyboard is displayed when the field is focused.
TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Enter your number',
),
)Step 2: Restrict Input to Digits Only
To ensure that only numeric input is accepted, use the inputFormatters property with FilteringTextInputFormatter.digitsOnly. This formatter restricts the input to digits.
TextField(
keyboardType: TextInputType.number,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly
],
decoration: InputDecoration(
labelText: 'Enter your number',
),
)Example Code
Below is a complete example demonstrating how to use these properties to create a number input field:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
theme: ThemeData(primarySwatch: Colors.blue),
);
}
}
class HomePage extends StatefulWidget {
@override
State createState() {
return HomePageState();
}
}
class HomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Container(
padding: const EdgeInsets.all(40.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
decoration: InputDecoration(labelText: "Enter your number"),
keyboardType: TextInputType.number,
inputFormatters: [
FilteringTextInputFormatter.digitsOnly
],
),
],
),
),
);
}
}Conclusion
By using the keyboardType and inputFormatters properties, you can easily configure a text field to accept only numeric input in Flutter. This method is straightforward and effective for ensuring data integrity in forms and inputs that require numerical values.
Enhance Your Testing with Repeato
When building mobile applications, ensuring the reliability and accuracy of your input fields is crucial. Repeato, our no-code test automation tool, can help you automate the testing of your numeric input fields across iOS and Android platforms. With Repeato’s fast editing and execution capabilities, you can quickly validate that your input fields behave as expected, helping maintain the quality of your Flutter applications. Learn more about how Repeato can streamline your testing process on our Flutter Test Automation page.
