Autovalidate of TextFormField after user interaction - flutter

Question

I am developing a flutter e_commerce app, and in registration, the username should be unique, for that, we have an endpoint in API to check either the username is taken or not, my problem is with validation, I need to validate after user interaction, in flutter we have auto validate mode, but there is only(always, onUserInteraction) options, and I need the validation right after user interaction
The textFormField of the username input is
TextFormField(
cursorColor: Theme.of(context).primaryColor,
autovalidateMode: AutovalidateMode.onUserInteraction,
decoration: InputDecoration(
suffixIcon: SuffixIcon(),
labelText:
'Choose suitable name and relevant to your products',
hintText: 'SweetCandies',
labelStyle: TextStyle(color: Colors.black),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).primaryColor,
),
),
),
validator: (value) {
if(value!.isNotEmpty){}
Provider.of<Store>(context).usernameExistence(value, 'no');
if(Provider.of<Store>(context).nameExistence){
return 'The Chosen name is already taken';
}
if (value.isEmpty) {
return 'Required';
}
},
onSaved: (value) {
Provider.of<Store>(context, listen: false)
.storeInformation['name'] = value!;
},
)
is there any way to active validator after user interaction???

Answer 1

You can attach a focusNode to TextField so whenever focus changes you can make an api call and validate the text
add this code and initState to your code
TextEditingController controller = TextEditingController();
FocusNode focusNode;
bool _hasInputError;
String errorText = "";
String text;
#override
void initState() {
super.initState();
focusNode = new FocusNode();
focusNode.addListener(() {
if (!focusNode.hasFocus) {
setState(() {
if(Provider.of<Store>(context).nameExistence){// your condition
_hasInputErro = true;
errorText = 'The Chosen name is already taken';
}// <-- else if condition ...
else{
_hasInputErro = false;
}
});
}
});
}
in TextFormField :
TextFormField(
focusNode: focusNode,// <-- add focusNode here
controller: controller,// <-- add controller here
cursorColor: Theme.of(context).primaryColor,
autovalidateMode: AutovalidateMode.onUserInteraction,
decoration: InputDecoration(
errorText: _hasInputError ? errorText : null, // <-- add this line to show errors
suffixIcon: SuffixIcon(),
labelText:
'Choose suitable name and relevant to your products',
hintText: 'SweetCandies',
labelStyle: TextStyle(color: Colors.black),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Theme.of(context).primaryColor,
),
),
),
// validator: ... , // <-- comment validator
onSaved: (value) {
Provider.of<Store>(context, listen: false)
.storeInformation['name'] = value!;
},
)