In mobile applications sometimes user did not fill all available Text Input fields and we have to be sure that all the required values should be filled before submitting. We can do this by getting entered value from TextField and check whether the entered value is equal equal to empty or not and on certain task we can print Alert dialog box to notifying user that you have not filled all the TextField boxes. We are only printing a message on Terminal or Command Prompt screen but you can perform here any task according to your requirement. So in this tutorial we would Check TextField Text Input is Empty or Not in Flutter iOS Android Example Tutorial.
Contents in this project Check TextField Text Input is Empty or Not in Flutter iOS Android Example:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget. We would call here CheckTextField() class directly.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Get Text Field Value')), body: Center( child: CheckTextField() ) ) ); } } |
4. Create a class named as CheckTextField extends with StatefulWidget. In this class we would pass the next class named as CheckTextFieldWidget with createState() method. This method would allow the mutable state management in given class tree.
|
1 2 3 4 5 |
class CheckTextField extends StatefulWidget { CheckTextFieldWidget createState() => CheckTextFieldWidget(); } |
5. Create a class named as CheckTextFieldWidget extends with State. In this class we would create all the TextField widget.
|
1 2 3 4 |
class CheckTextFieldWidget extends State { } |
6. Create 3 final Text Controller variables using TextEditingController() method. TextEditingController() is used to hold entered value for Text field widget.
|
1 2 3 |
final textController_1 = TextEditingController(); final textController_2 = TextEditingController(); final textController_3 = TextEditingController(); |
7. Create a function named as checkTextFieldEmptyOrNot(). In this function first we would create 3 String variables and get value from TextField text controller. Now we would check whether the Text Input is empty or not using If condition.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
checkTextFieldEmptyOrNot(){ // Creating 3 String Variables. String text1,text2,text3 ; // Getting Value From Text Field and Store into String Variable text1 = textController_1.text ; text2 = textController_2.text ; text3 = textController_3.text ; // Checking all TextFields. if(text1 == '' || text2 == '' || text3 == '') { // Put your code here which you want to execute when Text Field is Empty. print('Text Field is empty, Please Fill All Data'); }else{ // Put your code here, which you want to execute when Text Field is NOT Empty. print('Not Empty, All Text Input is Filled.'); } } |
8. Create 3 TextField widgets and 1 Button widget in Widget build area in CheckTextFieldWidget class. We are calling checkTextFieldEmptyOrNot() function on button onPress event.
|
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 |
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: textController_1, autocorrect: true, decoration: InputDecoration(hintText: 'Enter First Name'), ) ), Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: textController_2, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Last Name'), ) ), Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: textController_3, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Address'), ) ), RaisedButton( onPressed: checkTextFieldEmptyOrNot, color: Colors.purple, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here To Check TextField is Empty or Not'), ), ], ), )); } |
9. 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 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
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 Text Field Value')), body: Center( child: CheckTextField() ) ) ); } } class CheckTextField extends StatefulWidget { CheckTextFieldWidget createState() => CheckTextFieldWidget(); } class CheckTextFieldWidget extends State { final textController_1 = TextEditingController(); final textController_2 = TextEditingController(); final textController_3 = TextEditingController(); checkTextFieldEmptyOrNot(){ // Creating 3 String Variables. String text1,text2,text3 ; // Getting Value From Text Field and Store into String Variable text1 = textController_1.text ; text2 = textController_2.text ; text3 = textController_3.text ; // Checking all TextFields. if(text1 == '' || text2 == '' || text3 == '') { // Put your code here which you want to execute when Text Field is Empty. print('Text Field is empty, Please Fill All Data'); }else{ // Put your code here, which you want to execute when Text Field is NOT Empty. print('Not Empty, All Text Input is Filled.'); } } @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: textController_1, autocorrect: true, decoration: InputDecoration(hintText: 'Enter First Name'), ) ), Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: textController_2, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Last Name'), ) ), Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: textController_3, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Address'), ) ), RaisedButton( onPressed: checkTextFieldEmptyOrNot, color: Colors.purple, textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here To Check TextField is Empty or Not'), ), ], ), )); } } |
Screenshots:
