Drugus
Reputation: 7
Flutter: TextFormField Validator breaks the style of field
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: '[email protected]',
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";
});
}
}
},
),
),
],
),
),
),
),
);
}
}
Upvotes: 0
Views: 2916
Answers (2)
Midhun MP
Reputation: 107131
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.
Upvotes: 1
Yakub Pasha
Reputation: 533
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;
});
},
)
Upvotes: 2
Related Questions
- flutter TextFormField validation display alignment error
- In Flutter, How can I change TextFormField validation error message style?
- TextFormField Validation Not Working Correctly
- how to change color on TextFormField validator: (value) => validateCharacters(value),
- Flutter TextFormField Validation Error Text Padding
- TextFormField Validator: error border is not activated
- I want to validate my textFormField in Flutter without changing the decoration
- Flutter: Textformfield validator not working
- Validator pushed TextFormField above
- TextFormField validator, Error not visible on TextFormField