Flutter bottom overflowed by n pixels with end aligned column

Question

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 Textfield s are hidden when the keyboard appears.
• Setting resizeToAvoidBottomInset: false on the Scaffold also leaves the TextField s 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 TextField s when the user is typing without the pixel overflow error?

Answer 1

I just solved it by wrapping the column widget with Container and SingleChildScrollview to get your UI. I hope this helps you.

class SignUpScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: SafeArea(
          child: Container(
            alignment: Alignment.bottomCenter,
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisSize: MainAxisSize.max,
                children: [
                  Text(
                    'Sign Up',
                    // style: AppTextTheme.kBigTitle),
                    style: Theme.of(context).textTheme.headline,
                  ),
                  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),
                    style: Theme.of(context).textTheme.body1,
                  ),
                  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(
                          "Already have an account ?",
                          // style: AppTextTheme.kParagraphBold,
                          style: Theme.of(context).textTheme.subtitle,
                        ),
                        Text("Sign in",
                          // style: AppTextTheme.kParagraphBold
                          style: Theme.of(context)
                            .textTheme
                            .subtitle
                            .copyWith(
                                decoration:   TextDecoration.underline)),
                      ],
                    ),
                    onPressed: () {
                      // Navigator.pushReplacementNamed(
                      //     context, RoutePaths.SIGN_IN);
                    },
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}