title: Flutter: form shifts when validation is false
body: <p>i'm building a UI for a login form with validation.</p>
  <p>Here is the page:</p>
  <p><a href="https://i.stack.imgur.com/0uzX0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0uzX0.png" alt="enter image description here" /></a></p>
  <p>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.</p>
  <p>Here's a image, that shows the problem:</p>
  <p><a href="https://i.stack.imgur.com/DBh3L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DBh3L.png" alt="enter image description here" /></a></p>
  <p>Here is the code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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() =&gt; _LoginScreenState();
  }
  
  class _LoginScreenState extends State&lt;LoginScreen&gt; {
    FirebaseAuth auth = FirebaseAuth.instance;
    final _formKey = GlobalKey&lt;FormState&gt;();
  
    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) =&gt; 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 &lt; 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(
                                          () =&gt; 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) =&gt; ForgotPassScreen(),
                                    ),
                                  );
                                },
                                child: Text(
                                  "Forgot Password ?",
                                  style: TextStyle(color: Colors.deepOrange),
                                ),
                              ),
                              Expanded(child: SizedBox()),
                              FlatButton(
                                onPressed: () {
                                  Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                      builder: (context) =&gt; RegisterScreen(),
                                    ),
                                  );
                                },
                                child: Text(
                                  "Register",
                                  style: TextStyle(color: Colors.deepOrange),
                                ),
                              ),
                            ],
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  <p>EDIT:</p>
  <p>I tried swapping the Stack method for the suffixIcon suggested. And it works except for the position of the Icon that is off-centred.</p>
  <p><a href="https://i.stack.imgur.com/QLyHN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QLyHN.png" alt="enter image description here" /></a></p>
  <p>Here's the updated code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><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 &lt; 6) {
                                      return 'Minimum 6 characters';
                                    }
                                    return null;
                                  },
                                ),
                              ),</code></pre>
  </div>
  </div>
  </p>