Hello Guys How are you all? Hope you all are fine. I am working on Flutter TextField widget. I want to show an error message below the TextField widget if the user does not fill that TextField. I only have to use TextField Widget not TextFormField in this case. So we are going to learn Textfield validation in Flutter Here.
Textfield validation in Flutter
- How to make Textfield validation in Flutter?
To make Textfield validation in Flutter. First of all, make Text Field. same as below. And assign a controller to TextField. TextField has InputDecoration and InputDecoration has errorText property. So give errorText that you want to display. Now make submit button. when you click on the button if your textField value is empty then errorText should be displayed. We are going to use raised button here.
- Textfield validation in Flutter
To make Textfield validation in Flutter. First of all, make Text Field. same as below. And assign a controller to TextField. TextField has InputDecoration and InputDecoration has errorText property. So give errorText that you want to display. Now make submit button. when you click on the button if your textField value is empty then errorText should be displayed. We are going to use raised button here.
1. Make Text Field
First of all, make Text Field. same as below. And assign a controller to TextField.
final _text = TextEditingController(); TextField(
controller: _text,
decoration: InputDecoration(
labelText: 'Enter your username',
),
),2. Define Hint Text
TextField has InputDecoration and InputDecoration has errorText property. So give errorText that you want to display.
TextField(
controller: _text,
decoration: InputDecoration(
labelText: 'Enter your username',
errorText: 'Username Can\'t Be Empty',
),
),3. Make Submit Button
Now make submit button. when you click on the button if your textField value is empty then errorText should be displayed. We are going to use raised button here.
RaisedButton(
onPressed: () {
},
child: Text('Submit'),
textColor: Colors.white,
color: Colors.blueAccent,
)4. Check empty value on press button
Now make the bool value named _validate and set the default value as false.
bool _validate = false;
Now, when anyone presses on button then we will check if the value is empty then we will set _validate to true. We will use our Controller to check textField value.
RaisedButton(
onPressed: () {
setState(() {
_text.text.isEmpty ? _validate = true : _validate = false;
});
},
child: Text('Submit'),
textColor: Colors.white,
color: Colors.blueAccent,
)Then we will use _validate in our errorText if _validate = true then errorText will be displayed.
errorText: _validate ? 'Username Can\'t Be Empty' : null,Full Source Code
import 'package:flutter/material.dart ';
void main() {
runApp(
new MaterialApp(
home: MyHomePage(),
debugShowCheckedModeBanner: false,
),
);
}
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 Scaffold(
appBar: AppBar(
title: Text('TextField Validation FlutterCorner.com'),
),
body: Center(
child: Container(
padding: EdgeInsets.all(20),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
controller: _text,
decoration: InputDecoration(
labelText: 'Enter your username',
errorText: _validate ? 'Username Can\'t Be Empty' : null,
),
),
RaisedButton(
onPressed: () {
setState(() {
_text.text.isEmpty ? _validate = true : _validate = false;
});
},
child: Text('Submit'),
textColor: Colors.white,
color: Colors.blueAccent,
)
],
),
),
),
);
}
}Output
Summery
So, It’s All About this tutorial. I hope this tutorial helps you to Solve your error. Please Comment Below if You stucks anywhere with my code. And please comment below on which solution worked for you. Thank You.
Leave a Reply