Flutter – Textfield Validation
If you are building the sign-in or sign-up page in Android application, then Obviously you need to validate the Text field. otherwise, it can be null or empty. This will cause save the null values into the database. Then further make the application less impact. So to overcome this problem we need to prior check that there can not be a empty text field. So that null value can not be saved into the database. A sample video is given below to get an idea about what we are going to do in this article.
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: Import the material package
Adding material package that gives us the important functions and calls the runApp method in the main function that will call our application.
import 'package:flutter/material.dart'; void main() { runApp(RunMyApp()); }
Step 3: Creating stateful Widget
Now we have to make a stateful widget and then return the materialApp widget which allows us the set the title and theme and many more or default values.
Step 4: Create the text editing controller
Create the text editing controller to retrieve the text from the Text field. You can refer to this article to Retrieve the text from the text field.
final _text = TextEditingController(); //texteditingcontroller bool _validate = false; //variable to store the bool value
Step 5: Check the text field is empty or not while pressing the button.
ElevatedButton( onPressed: () { setState(() { _text.text.isEmpty ? _validate = true : _validate = false; }); }, child: Text('Submit'), )
Here , _text.text.isEmpty we are checking using the text editing controller. If empty validate variable will assign with false otherwise assign with true. And finally according to the value of validate we can raise the error in the text field as shown in the output video.
Final Code
Dart
import 'package:flutter/material.dart' ; void main() { runApp(MyHomePage()); } class MyHomePage extends StatefulWidget { @override MyHomePageState createState() { return new MyHomePageState(); } } class MyHomePageState extends State<MyHomePage> { final _text = TextEditingController(); bool _validate = false ; @override void dispose() { _text.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return MaterialApp( theme: ThemeData(primarySwatch: Colors.green), home: Scaffold( appBar: AppBar( title: Text( 'TextField Validation' ), ), body: Center( child: Padding( padding: const EdgeInsets.all(300.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Error Showed if Field is Empty on Submit button Pressed' ), TextField( controller: _text, decoration: InputDecoration( labelText: 'Enter the Value' , errorText: _validate ? 'Value Can' t Be Empty' : null, ), ), SizedBox( height: 10, ), ElevatedButton( onPressed: () { setState(() { _text.text.isEmpty ? _validate = true : _validate = false ; }); }, child: Text( 'Submit' ), ) ], ), ), ), ), ); } } |