When keyboard is shown, everything is pushed up and I get a error

Question

I have the following code:



    class _MyHomePageState extends State {
      @override
      Widget build(BuildContext context) {
        // This method is rerun every time setState is called, for instance as done
        // by the _incrementCounter method above.
        //
        // The Flutter framework has been optimized to make rerunning build methods
        // fast, so that you can just rebuild anything that needs updating rather
        // than having to individually change instances of widgets.
        return new Scaffold(
            body: new Column(
          children: [
            new Container(
              color: JBTheme.colorGreenBrand,
              height: 130.0,
              alignment: Alignment.bottomLeft,
              child: new Center(
                child: new Align(
                  alignment: Alignment.bottomCenter,
                  child: new Container(
                    color: JBTheme.colorOrange,
                    constraints: new BoxConstraints(maxWidth: 270.0),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      children: [
                        new Column(
                          mainAxisSize: MainAxisSize.min,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            new Image.asset("flags/flag_dk.png"),
                            new Container(
                              margin: const EdgeInsets.only(top: 4.0, bottom: 4.0),
                              child: new Text("Danmark"),
                            ),
                            new Text("DKK")
                          ],
                        ),
                        new Expanded(child: new Image.asset("images/arrow.png")),
                        new Column(
                          mainAxisSize: MainAxisSize.min,
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            new Image.asset("flags/flag_us.png"),
                            new Container(
                              margin: const EdgeInsets.only(top: 4.0, bottom: 4.0),
                              child: new Text("USA"),
                            ),
                            new Text("USD")
                          ],
                        )
                      ],
                    ),
                  ),
                ),
              ),
            ),
            new Expanded(
                child: new Container(
              color: JBTheme.colorGreyMedium,
              child: new Column(
                children: [
                  new Expanded(child: new Container()),
                  new Padding(
                      padding: const EdgeInsets.only(bottom: 8.0),
                    child: new Card(
                      elevation: -8.0,
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(15.0),
                      ),
                      child: new Container(
                          width: 200.0,
                          height: 30.0,
                          color: JBTheme.colorWhite,
                          child: new Stack(
                            children: [
                              new TextField(
                                  textAlign: TextAlign.center
                              )
                            ],
                          )
                      ),
                    )
                  )
                ],
              ),
            )),
            new Container(
              height: 260.0,
              color: JBTheme.colorGreenMint,
            )
          ],
        ));
      }
    }

And it looks like this:

But when I click the TextField and the keyboard opens I get this:

I did not expect all of my layout to be moved up by the full keyboard height, I would like it to only move up enough so that the focused TextField is visible (and not to give a error). How can I fix this, and why is it happening?

Thank you
Søren

score 22 · Accepted Answer · answered Aug 23 '18 at 07:08

There are two solutions to this problem.

Add resizeToAvoidBottomPadding: false to your Scaffold

Scaffold(
 resizeToAvoidBottomPadding: false,
body: ...)

Put your Scaffold body inside a scrollableView (like SingleChildScrollView or ListView)
```
new Scaffold(
    body: SingleChildScrollView(child: //your existing body
...)
```

You can find similar problem and answer here

score 11 · Answer 2 · edited Oct 17 '19 at 12:50

This is Flutters way of showing us how many pixels of content will be hidden from users eyesight when using the keypad. Try setting resizeToAvoidBottomPadding to false... From docs:

Whether the body (and other floating widgets) should size themselves to avoid the window's bottom padding.

 Scaffold(
    resizeToAvoidBottomPadding: false,

This will avoid the resizing so you will at least avoid the dev warning being shown. But remember user will not see some content, and also this is a developer warning.

Update on 17/10/2019

resizeToAvoidBottomPadding is now Deprecated.

Use resizeToAvoidBottomInset to specify if the body should resize when the keyboard appears.

Scaffold(
    resizeToAvoidBottomInset: false,

score 1 · Answer 3 · answered May 11 '20 at 20:00

1

If you just use SingleChildScrollView content looses vertical alignment. You can also wrap the SingleChildScrollView in a Center Widget.

child: Center( 
    child: SingleChildScrollView(
        child: Column(
            children: <Widget>...

answered May 11 '20 at 20:00

ronbla

11
1

score 0 · Answer 4 · answered Aug 01 '19 at 11:39

0

A full description of this error and two possible solutions can be found on Medium article available on https://medium.com/zipper-studios/the-keyboard-causes-the-bottom-overflowed-error-5da150a1c660. The last one works great for me.

answered Aug 01 '19 at 11:39

Loredana

9
1

5

Please not just post a link as an answer. Once the link might be broken, someone looking for the same answer would not get any help. Please update your answer to cover the key features of the solution and provide the link only as reference. – Erbsenkoenig Aug 01 '19 at 11:58
I would have upvoted this answer, if at least a bit of code snippet was added here! – Randika Vishman Sep 02 '19 at 05:01

When keyboard is shown, everything is pushed up and I get a error

4 Answers4

Linked