Flutter: form shifts when validation is false - forms

Question

i'm building a UI for a login form with validation.
Here is the page:
I'm overall very pleased with the look of the page and it works fine. There is just one exception: when the user inputs invalid parameters in the fields (one or more) the form shifts and the button responsable for the password visibility is not centered anymore.
I searched online and they suggest to wrap it in an Expanded widget, but it doesn't solve my problem.
Here's a image, that shows the problem:
Here is the code:
import 'package:email_validator/email_validator.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:client/providers/cloudfirestore_provider.dart';
import 'package:client/screens/forgotpass_screen.dart';
import 'package:client/screens/register_screen.dart';
class LoginScreen extends StatefulWidget {
#override
_LoginScreenState createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
FirebaseAuth auth = FirebaseAuth.instance;
final _formKey = GlobalKey<FormState>();
final email = TextEditingController();
final password = TextEditingController();
bool _obscureText = true;
IconData iconData = Icons.visibility;
var isLoading = false;
final focus = FocusNode();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Builder(
builder: (ctx) => SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
color: Colors.yellow,
width: double.infinity,
height: MediaQuery.of(context).padding.top,
),
Stack(
alignment: Alignment.center,
children: [
Container(
color: Colors.yellow,
width: double.infinity,
height: (MediaQuery.of(context).size.height -
MediaQuery.of(context).padding.top) *
0.4,
),
ClipRRect(
borderRadius: BorderRadius.circular(100.0),
child: Container(
child: Image.asset('assets/images/logo.jpg'),
height: 150,
width: 150,
),
),
],
),
Container(
height: (MediaQuery.of(context).size.height -
MediaQuery.of(context).padding.top) *
0.6,
padding: EdgeInsets.symmetric(vertical: 30, horizontal: 60),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Hi, there!",
style: TextStyle(fontSize: 20, color: Colors.grey[900]),
),
Container(
height: 210,
child: Form(
key: _formKey,
child: Column(
children: [
Expanded(
child: TextFormField(
textInputAction: TextInputAction.next,
onFieldSubmitted: (v) {
FocusScope.of(context).requestFocus(focus);
},
controller: email,
decoration: InputDecoration(labelText: "Email"),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (EmailValidator.validate(value)) {
return null;
}
return "Please enter a valid email";
},
),
),
Expanded(
child: Stack(
children: [
TextFormField(
focusNode: focus,
controller: password,
decoration:
InputDecoration(labelText: "Password"),
obscureText:
_obscureText, // create little eye to show password
validator: (value) {
if (value.length < 6) {
return 'Minimum 6 characters';
}
return null;
},
),
IconButton(
icon: Icon(iconData),
onPressed: () {
setState(
() {
_obscureText = !_obscureText;
if (iconData == Icons.visibility) {
iconData = Icons.visibility_off;
} else {
iconData = Icons.visibility;
}
},
);
})
],
alignment: Alignment.bottomRight,
),
),
SizedBox(
height: 20,
),
Container(
width: 200,
height: 50,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50.0),
),
color: Colors.deepOrange,
textColor: Colors.white,
onPressed: () async {
Scaffold.of(ctx).hideCurrentSnackBar();
setState(() {
isLoading = true;
});
if (_formKey.currentState.validate()) {
login(email, password) async {
try {
await FirebaseAuth.instance.signOut();
await FirebaseAuth.instance
.signInWithEmailAndPassword(
email: email.text,
password: password.text);
if (FirebaseAuth.instance.currentUser
.emailVerified ==
false)
Scaffold.of(ctx).showSnackBar(
SnackBar(
content: Text(
"Please verify your email."),
),
);
else
Scaffold.of(ctx).showSnackBar(
SnackBar(
content:
Text("Logging you in ..."),
),
);
setState(() {
isLoading = false;
});
} catch (e) {
print(e.toString());
if (e.toString() ==
"[firebase_auth/wrong-password] The password is invalid or the user does not have a password.") {
Scaffold.of(ctx)
.hideCurrentSnackBar();
Scaffold.of(ctx).showSnackBar(
SnackBar(
content: Text(
"The password is incorrect."),
),
);
} else if (e.toString() ==
"[firebase_auth/user-not-found] There is no user record corresponding to this identifier. The user may have been deleted.") {
Scaffold.of(ctx)
.hideCurrentSnackBar();
Scaffold.of(ctx).showSnackBar(
SnackBar(
content: Text(
"There is no email adress connected to this account."),
),
);
} else if (e.toString() ==
"[firebase_auth/too-many-requests] We have blocked all requests from this device due to unusual activity. Try again later.") {
Scaffold.of(ctx)
.hideCurrentSnackBar();
Scaffold.of(ctx).showSnackBar(
SnackBar(
content: Text(
"We have blocked all requests from this device due to unusual activity. Try again later."),
),
);
} else {
Scaffold.of(ctx)
.hideCurrentSnackBar();
Scaffold.of(ctx).showSnackBar(
SnackBar(
content: Text(
"Pls check your internet connection and try again."),
),
);
}
setState(() {
isLoading = false;
});
}
}
await login(email, password).whenComplete(
() => CloudFirestoreProvider().addUser(
email.text,
password.text,
));
} else
setState(() {
isLoading = false;
});
},
child: (isLoading)
? CircularProgressIndicator(
backgroundColor: Colors.white,
)
: Text('Submit',
style: TextStyle(fontSize: 22)),
),
),
],
),
),
),
Expanded(
child: Container(
alignment: Alignment.bottomCenter,
child: Row(
children: [
FlatButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ForgotPassScreen(),
),
);
},
child: Text(
"Forgot Password ?",
style: TextStyle(color: Colors.deepOrange),
),
),
Expanded(child: SizedBox()),
FlatButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RegisterScreen(),
),
);
},
child: Text(
"Register",
style: TextStyle(color: Colors.deepOrange),
),
),
],
),
),
)
],
),
),
],
),
),
),
);
}
}
EDIT:
I tried swapping the Stack method for the suffixIcon suggested. And it works except for the position of the Icon that is off-centred.
Here's the updated code:
Expanded(
child: TextFormField(
focusNode: focus,
controller: password,
decoration: InputDecoration(
labelText: "Password",
suffixIcon: IconButton(
color: Colors.grey[900],
icon: Icon(iconData),
onPressed: () {
setState(
() {
_obscureText = !_obscureText;
if (iconData ==
Icons.visibility) {
iconData = Icons.visibility_off;
} else {
iconData = Icons.visibility;
}
},
);
})),
obscureText:
_obscureText, // create little eye to show password
validator: (value) {
if (value.length < 6) {
return 'Minimum 6 characters';
}
return null;
},
),
),

Answer 1

Put your icon in the sufficient property of the input Decoration on your password text field.
inputDecoration(suffixIcon: IconButton())