In dart there is a inbuilt function named as _isNumeric() which is Boolean type return value function. Using the _isNumeric(String) function we can easily check whether the entered value in TextField widget is numeric or not. The _isNumeric() function would return true if the value is numbered and return false if the entered string contains non numeric numbers. So in this tutorial we would Flutter Dart Check Entered String Value is Number or Not in Android iOS Example Tutorial in Text Input TextField widget.
Contents in this project Flutter Dart Check Entered String Value is Number or Not Android iOS Example Tutorial:
1. Open your project’s main.dart file and import material.dart package inside it.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main Root parent class named as MyApp extends StatelessWidget. Inside this class we would call TextFieldClass as child.
|
1 2 3 4 5 6 7 8 9 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Check Value Is Number Or Not')), body: Center(child: TextFieldClass()))); } } |
4. Creating another class named as TextFieldClass extends StatefulWidget. In this class we would call the createState() method of State to enable mutable state in given class tree.
|
1 2 3 |
class TextFieldClass extends StatefulWidget { TextFieldClassState createState() => TextFieldClassState(); } |
5. Creating another class named as TextFieldClassState extends State. This is our main View child class in which we would write all widgets code.
|
1 2 3 4 |
class TextFieldClassState extends State<TextFieldClass> { } |
6. Creating a final textFieldHolder variable to use as TextEditingController(). To extract value from TextField widget we have to use TextEditingController.
|
1 |
final textFieldHolder = TextEditingController(); |
7. Creating a variable named as value. We would store the Text Input entered value in value variable.
|
1 |
String value = ''; |
8. Creating a variable named as output with default message text Not Checked. We would use this variable to hold the result like Entered value is number or Entered value is Not number and display the message on mobile app screen.
|
1 |
String output = 'Not Checked'; |
9. Creating a function named as checkTextInputData(), Using this function we would first store the TextField entered value on value variable using State then we would call the _isNumeric() function with Value and after checking value is number or not we would set the result in output variable.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
checkTextInputData() { setState(() { value = textFieldHolder.text; }); print(_isNumeric(value)); if (_isNumeric(value) == true) { setState(() { output = 'Value is Number'; }); } else { setState(() { output = 'Value is Not Number'; }); } } |
10. Creating our main value checking function named as _isNumeric() Boolean type.
Note: If the entered value is pure number then it will returns us True and if the entered value is not number then it will returns us False.
|
1 2 3 4 5 6 |
bool _isNumeric(String result) { if (result == null) { return false; } return double.tryParse(result) != null; } |
11. Creating Widget Build Area -> Column widget -> TextField widget, Raised Button widget and Text widget.
|
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 |
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: textFieldHolder, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Some Text Here'), )), RaisedButton( onPressed: checkTextInputData, color: Color(0xff33691E), textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here To Check Value Is Number Or Not'), ), Padding( padding: EdgeInsets.all(8.0), child: Text("$output", style: TextStyle(fontSize: 20))) ], ), )); } |
12. 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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
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('Check Value Is Number Or Not')), body: Center(child: TextFieldClass()))); } } class TextFieldClass extends StatefulWidget { TextFieldClassState createState() => TextFieldClassState(); } class TextFieldClassState extends State<TextFieldClass> { final textFieldHolder = TextEditingController(); String value = ''; String output = 'Not Checked'; checkTextInputData() { setState(() { value = textFieldHolder.text; }); print(_isNumeric(value)); if (_isNumeric(value) == true) { setState(() { output = 'Value is Number'; }); } else { setState(() { output = 'Value is Not Number'; }); } } bool _isNumeric(String result) { if (result == null) { return false; } return double.tryParse(result) != null; } @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: textFieldHolder, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Some Text Here'), )), RaisedButton( onPressed: checkTextInputData, color: Color(0xff33691E), textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here To Check Value Is Number Or Not'), ), Padding( padding: EdgeInsets.all(8.0), child: Text("$output", style: TextStyle(fontSize: 20))) ], ), )); } } |
Screenshots:
