Flutter - Textfield reaction when focus changes - flutter

Question

I've made a program where the user can create an account, but I've placed some restrictions on the textfields (like for the First Name, it can only accept a string made of A-Z or a-z).
I want an "error text" to show under the textfield if the input is wrong (like if the user types "John1"), but I don't know how to do this. The simple way would be to use the onEditingComplete but this only works if the user taps on the keyboard the "done" key.
Is there a way to make the "error text" appear when the focus changes from one textfield to another?

Answer 1

You can use the validator property of the textfield to do this. It is recommended to encapsulate your fields in a Form() widget and then use the FormTextField() widget to implement your validations, this will enable an error to be shown at the bottom of the text field, if focus changes, or submission is attempted.
Example:
TextFormField(
onSaved: (String value) {},
validator: (String value) {
if (value.isEmpty) {
return 'Please enter some text';
}
return null;
},
)
The error will appear below in red fonts.

Answer 2

If you want to show error text whenever text/value changed you can do this.
In TextField 'onChanged' validate the user input using some regex and check for error ,if there is an error using TextField decoration 'errorText' property you can show required error.
Widget phoneNumberTextField() {
return Padding(
padding: EdgeInsets.fromLTRB(25, 10, 25, 10),
child: TextField(
style: TextStyle(color: Colors.white),
controller: _phoneNumberController,
maxLength: Constants.PhoneNumberTextFieldMaxLength,
onChanged: (value) {
_phoneNumberErrorText =
validatePhoneNumberTextField(_phoneNumberController.text);
_hasPhoneNumberError = _phoneNumberErrorText.isNotEmpty;
setState(() {});
},
keyboardType: TextInputType.number,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green, width: 1.0),
),
errorText: _hasPhoneNumberError ? _phoneNumberErrorText : null),
),
);
}
String validatePhoneNumberTextField(String text) {
String errorText = '';
if (text.length < 1) {
errorText = 'Phone Number should not be empty';
} else if (text.length != 10) {
errorText = 'Please enter valid phone number.';
}
return errorText;
}