Categories
Mastering Development

Flutter bottom overflowed by n pixels with end aligned column

I’m trying to display a simple sign up screen in Flutter but I’m having a bottom overflowed by n pixels error when the keyboard is displayed.

My Flutter Widget:

class SignUpScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Padding(
            padding: const EdgeInsets.all(16),
            child: SafeArea(
                child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    mainAxisAlignment: MainAxisAlignment.end,
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      Text(S
                          .of(context)
                          .signUpTitle,
                          style: AppTextTheme.kBigTitle),
                      Container(height: 16),
                      Text(
                          "Some text describing what happens when we do stuff with things and other stuff that probably won't fit in this layout and will give us the horrible error banner ath the bottom of the screen. There's scope for even more text depending on how I'm feeling this evening. It could be that I stop typing, it could be that I type more and more. It really depends on what ",
                          style: AppTextTheme.kParagraph),
                      Container(height: 24),
                      Text("Email address"),
                      TextField(
                          decoration: InputDecoration(
                              hintText: "Email address")),
                      Container(height: 8),
                      Text("Password"),
                      TextField(
                          decoration: InputDecoration(hintText: "Password")),
                      Container(height: 24),
                      MaterialButton(
                        onPressed: () {
                          // Do stuff
                        },
                        child: Text("Sign up"),
                      ),
                      Container(height: 32),
                      FlatButton(
                        child: Column(
                          children: [
                            Text(
                              "Some other text",
                              style: AppTextTheme.kParagraphBold,
                            ),
                            Text("Sign in instead",
                                style: AppTextTheme.kParagraphBold.copyWith(
                                    decoration: TextDecoration.underline)),
                          ],
                        ),
                        onPressed: () {
                          Navigator.pushReplacementNamed(
                              context, RoutePaths.SIGN_IN);
                        },
                      )
                    ]))));
  }
}

I’ve had a look around at various solutions but each come with an undesirable trade-off that will either break the design or create an undesirable user experience:

  • Wrapping the Column in a SingleChildScrollView means that the Textfields are hidden when the keyboard appears.
  • Setting resizeToAvoidBottomInset: false on the Scaffold also leaves the TextFields hidden behind the keyboard.
  • Replacing the Column with a ListView means that I can’t set a mainAxisAlignment to MainAxisAlignment.end to get the look I’m after in the screenshot where the content is bottom aligned.

The question:

How can I achieve the UI I want with the content aligned toward the bottom of the screen and still be able to see the TextFields when the user is typing without the pixel overflow error?

Leave an answer

Your email address will not be published. Required fields are marked *