TextField widget has a property named as keyboardType which support a argument TextInputType.number. Using this method we can easily change behavior of Keypad of both android and iOS devices. TextInputType.number method allows us to open only Number type keyboard when TextField widget is selected. So in this tutorial we would Flutter Get Only Numeric Number Value From TextField Text Input Widget Android iOS Example Tutorial.
Contents in this project Flutter Get Only Numeric Number Value From TextField Text Input Widget Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main Root MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main Root Class named as MyApp extends with StatelessWidget. In this class we would call another class named as TextFieldNumeric().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Get Only Numeric Value')), body: Center( child: TextFieldNumeric() ) ) ); } } |
4. Creating a class named as TextFieldNumeric extends StatefulWidget. In this class we would make createState() method and pass next class NumericTextFieldWidget name along with it.
|
1 2 3 4 5 |
class TextFieldNumeric extends StatefulWidget { NumericTextFieldWidget createState() => NumericTextFieldWidget(); } |
5. Creating another class named as NumericTextFieldWidget extends State. This class is our main Children class in which we would make the TextField widget.
|
1 2 3 4 |
class NumericTextFieldWidget extends State { } |
6. Creating a final type number variable TextEditingController() to get entered value from Text Field widget.
|
1 |
final number = TextEditingController(); |
7. Creating Scaffold widget -> Center widget -> Column widget -> Container widget -> TextField widget.
- keyboardType : TextInputType.number – To enable only Number value Keypad.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: number, autocorrect: true, keyboardType: TextInputType.number, decoration: InputDecoration(hintText: 'Enter Your Number Here'), ) ), ], ), )); } |
8. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Get Only Numeric Value')), body: Center( child: TextFieldNumeric() ) ) ); } } class TextFieldNumeric extends StatefulWidget { NumericTextFieldWidget createState() => NumericTextFieldWidget(); } class NumericTextFieldWidget extends State { final number = TextEditingController(); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: number, autocorrect: true, keyboardType: TextInputType.number, decoration: InputDecoration(hintText: 'Enter Your Number Here'), ) ), ], ), )); } } |
Screenshots:
What if the value was empty, how do you handle the error?
then use a validoator property in TextFormField like,
validator: (String value){
if (value.isempty)
return “fill the required info”;
}