Bottom overloaded by 213 pixels in flutter

Question

Hi I am trying to create login screen. It is working fine for me. When I open the keyboard then it is giving me an error Bottom overloaded by 213 pixels.

Answer 1

This align items bottom to top, Try this..

child: SizedBox(
      height: MediaQuery.of(context).size.height,
                  child: SingleChildScrollView(
                    reverse: true,

Answer 2

I would suggest replacing the top Column widget with a ListView, that automatically resizes on keyboard input, whilst also supporting scrolling.

If you really want this setup as it is, you can edit your Scaffold with the parameter

resizeToAvoidBottomPadding: false 

That should make the error disappear

Answer 3

You can enclose all the widgets within the ListView.
So you can scroll it and the overloaded will disappear.

Answer 4

With resizeToAvoidBottomPadding: false in Scaffold, You don't see all the widgets that are below the open textfield. The solution is to insert a container with a SingleChildScrollView inside. Example:

Container(
    alignment: Alignment.center,
    width: double.infinity,
    height: double.infinity,
    color: viewModel.color,
    child: SingleChildScrollView(child:"Your widgets"));

Answer 5

Wrap your top column inside SingleChildScrollView.

Make you layout scrollable.

Answer 6

You can set resizeToAvoidBottomInset: false for avoiding overflow, but you can't reach fields in bottom of page, which can be covered by keyboard.

Or you can wrap body of Scaffold inside SingleChildScrollView