Flutter: TextFormField Validator breaks the style of field - flutter

Question

I have this TextFormField and i am working on implementing a LogIn/Registration screen. The problem is that when the Validator pops the error onto the screen the borders of the TextFormField change from rounded edges to square shaped. What can i do to just print out the error? I was thinking about printing everything above or below the entire form, but what about a way to do it with the Valdiator property?
Or is there a more effective way to do it?
It also seems that the ListView in which the TextFormField resides gets destroyed in the process making it very annoying to type after the validator gets printed out on the screen.
beforeValidator
afterValidator
Just the TextFormField:
TextFormField(
validator: (String str) =>
str.isEmpty ? 'Enter a username' : null,
decoration: InputDecoration(
hintText: 'theChadMaster76',
hintStyle: TextStyle(
fontStyle: FontStyle.italic,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(35.0),
),
focusedBorder: OutlineInputBorder(
//focusBorder changes or not when user first clicks on the field
borderSide: BorderSide(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(35.0),
),
prefixIcon: Icon(Icons
.account_circle), //make the icon also change its color
filled: true,
fillColor: Colors.grey.shade200,
),
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.bottom,
onChanged: (String str) {
setState(() {
userName = str;
});
},
),
Entire file:
class RegistrationScreen extends StatefulWidget {
static const String id = 'registration_screen';
#override
_RegistrationScreenState createState() => _RegistrationScreenState();
}
class _RegistrationScreenState extends State<RegistrationScreen> {
final AuthService _auth = AuthService();
final _formKey = GlobalKey<FormState>();
bool loading = false;
String error = '';
String userName = "";
String email = "";
String password = "";
#override
Widget build(BuildContext context) {
return loading ? Loading() : Scaffold(
appBar: AppBarModel(),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 30.0),
child: Center(
child: Form(
key: _formKey,
child: ListView(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(vertical: 50.0),
child: Center(child: Text('add logo')),
),
Padding(
padding: const EdgeInsets.only(left: 20.0, bottom: 10.0),
child: Text(
'Username:',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
//fontStyle: FontStyle.italic,
),
),
),
TextFormField(
validator: (String str) =>
str.isEmpty ? 'Enter a username' : null,
decoration: InputDecoration(
hintText: 'theChadMaster76',
hintStyle: TextStyle(
fontStyle: FontStyle.italic,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(35.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(35.0),
),
prefixIcon: Icon(Icons
.account_circle), //make the icon also change its color
filled: true,
fillColor: Colors.grey.shade200,
),
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.bottom,
onChanged: (String str) {
setState(() {
userName = str;
});
},
),
SizedBox(height: 30.0),
Padding(
padding: const EdgeInsets.only(left: 20.0, bottom: 10.0),
child: Text(
'Email:',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
//fontStyle: FontStyle.italic,
),
),
),
TextFormField(
keyboardType: TextInputType.emailAddress,
validator: (String str) =>
str.isEmpty ? 'Enter an email' : null,
decoration: InputDecoration(
hintText: 'bobbyBob#gmail.com',
hintStyle: TextStyle(
fontStyle: FontStyle.italic,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(35.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(35.0),
),
prefixIcon:
Icon(Icons.mail),
filled: true,
fillColor: Colors.grey.shade200,
),
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.bottom,
onChanged: (String str) {
setState(() {
email = str;
});
},
),
SizedBox(height: 30.0),
Padding(
padding: const EdgeInsets.only(left: 20.0, bottom: 10.0),
child: Text(
'Password:',
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
//fontStyle: FontStyle.italic,
),
),
),
TextFormField(
validator: (String str) =>
str.length < 6 ? 'Enter an password 6+ char' : null,
obscureText: true,
decoration: InputDecoration(
hintText: 'secretPassword123!',
hintStyle: TextStyle(
fontStyle: FontStyle.italic,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(35.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(35.0),
),
prefixIcon: Icon(Icons.memory),
filled: true,
fillColor: Colors.grey.shade200,
),
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.bottom,
onChanged: (String str) {
setState(() {
password = str;
});
},
),
SizedBox(
height: 50.0,
),
Center(
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
side: BorderSide(color: Colors.green.shade400),
),
color: Colors.green.shade400,
textColor: Colors.grey.shade300,
padding:
EdgeInsets.symmetric(horizontal: 120.0, vertical: 10.0),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'SUBMIT',
style: TextStyle(
fontSize: 18.0,
letterSpacing: 4.0,
fontStyle: FontStyle.italic,
),
),
),
onPressed: () async {
if (_formKey.currentState.validate()) {
setState(() {
loading = true;
});
dynamic result = await _auth.registerWithEmailPassUser(
email, password);
if (result == null) {
setState(() {
loading = false;
error = "please supply a valid email";
});
}
}
},
),
),
],
),
),
),
),
);
}
}

Answer 1

you just need to override the errorBoder style as well, like the way you did for focusedBorder,enabledBorder. below is the code snippet.
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(35.0),
)
and your final TextFormFiled should look like
TextFormField(
validator: (String str) =>
str.isEmpty ? 'Enter a username' : null,
decoration: InputDecoration(
hintText: 'theChadMaster76',
hintStyle: TextStyle(
fontStyle: FontStyle.italic,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.green),
borderRadius: BorderRadius.circular(35.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.blueAccent),
borderRadius: BorderRadius.circular(35.0),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(35.0),
),
prefixIcon: Icon(Icons
.account_circle), //make the icon also change its color
filled: true,
fillColor: Colors.grey.shade200,
),
textAlign: TextAlign.center,
textAlignVertical: TextAlignVertical.bottom,
onChanged: (String str) {
setState(() {
userName = str;
});
},
)

Answer 2

You have to specify the errorBorder & focusedErrorBorder as well:
errorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(35.0),
),
focusedErrorBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red),
borderRadius: BorderRadius.circular(35.0),
),
Refer InputDecoration for all the available options.