Validating 2 things for TextFormField - flutter

Question

I have a textformfield which validates min length to be at least 3 characters. Later on, I'll validate with backend that the username is unique.
But currently, I'm having trouble showing 2 error text for 2 errors. Namely, one for min length ( "Please enter at least 3 characters for your username") and one for non-unique username ('Your username is popular, please try another one.')
Questions:
How to make the suffix icon appear only when at least 1 character is typed? instead of by default, I know it's linked to hasMinLengthUnique = false.
How to show different error text for respective errors?
And later on, how to put a ternary operator on the navigation to another page based on value hasMinLengthUnique = true.
Bcos right now, whether hasMinLengthUnique = true or false, the navigation doesn't happen.
Form(
key: _formKey,
autovalidateMode: AutovalidateMode.always,
child: TextFormField(
controller: _controller,
validator: (value) {
return (0 < value.length && value.length < 3)
? "Please enter at least 3 characters for your username"
: null;
},
onChanged: (value) {
setState(() {
value.length > 2
// && username must be unique
? hasMinLengthUnique = true
: hasMinLengthUnique = false;
});
},
style: TextStyle(color: Colors.white),
autofocus: true,
maxLength: 15,
decoration: InputDecoration(
suffix: hasMinLengthUnique
? IconButton(
icon:
Icon(Icons.check_circle, color: Colors.green))
: IconButton(
icon: Icon(Icons.cancel, color: Colors.red)),
errorBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.blue, width: 1.0),
),
errorStyle: TextStyle(color: Color(0xff4aa3f8)),
focusedErrorBorder: UnderlineInputBorder(
borderSide: BorderSide.none,
),
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(15)),
// borderSide: BorderSide(width: 1, color: Colors.white),
),
),
),
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.18,
),
Padding(
padding: EdgeInsets.only(
right: MediaQuery.of(context).size.height * 0.015,
),
child: DelayedDisplay(
delay: Duration(seconds: 3),
child: Align(
alignment: Alignment.centerRight,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
onPrimary: Colors.white,
primary: Color(0xff3a327f)),
child: Icon(Icons.chevron_right, size: 27),
onPressed: () async {
// if (formKey.currentState.validate()) {
Navigator.push(context, _createRoute());
// }
})),
))
]),
));

Answer 1

Here is the code
It checks whether a username is greater than 2 or not
Then it will check whether your username is popular or not (try typing admin)
It will update your hasMinLengthUnique accordingly that will update your UI of IconButton()
It will update your ElevatedButton() as well. It becomes disable if hasMinLengthUnique is false and become enable if hasMinLengthUnique is true.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool hasMinLengthUnique = false;
var _controller = TextEditingController();
GlobalKey<FormState> _formKey = GlobalKey();
var defUsername = ["admin"];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Container(
color: Colors.lightBlue[900],
child: Column(
children: [
Form(
key: _formKey,
autovalidateMode: AutovalidateMode.always,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
controller: _controller,
validator: (value) {
if (value.length < 3) {
return "Please enter at least 3 characters for your username";
}
if (value.contains(defUsername[0])) {
return "Username is too popular";
}
return null;
},
onChanged: (value) {
setState(() {
if (value.contains(defUsername[0]) ||
value.length <= 2) {
hasMinLengthUnique = false;
} else {
hasMinLengthUnique = true;
}
});
},
style: TextStyle(color: Colors.white),
autofocus: true,
maxLength: 15,
decoration: InputDecoration(
contentPadding:
EdgeInsets.symmetric(vertical: 0, horizontal: 10),
labelText: "Username",
suffix: hasMinLengthUnique
? Icon(Icons.check_circle, color: Colors.green)
: _controller.text.isEmpty
? Icon(null, color: Colors.red)
: Icon(Icons.cancel, color: Colors.red),
border: OutlineInputBorder(),
),
),
),
),
SizedBox(
height: MediaQuery.of(context).size.height * 0.18,
),
Padding(
padding: EdgeInsets.only(
right: MediaQuery.of(context).size.height * 0.015,
),
child: Container(
child: Align(
alignment: Alignment.centerRight,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
onPrimary: Colors.white, primary: Color(0xff3a327f)),
child: Icon(Icons.chevron_right, size: 27),
onPressed: hasMinLengthUnique
? () {
print("go to next screen");
}
: null,
),
),
),
)
],
),
),
),
);
}
}
Thank you!

Answer 2

Have you tried if else statement in onChanged Value
var isValidate;
onChanged(){
if(1st condition){
setState(){}
}
else if(2nd condition){
setState(){}
}
}