Resolve Bottom Overflowed Issue

In the flutter app, while opening the keyboard you sometimes get issue like the image below.

Bottom overflow

Here you can see the “BOTTOM OVERFLOWED BY 142 PIXELS”. 

To resolve this we can use two options.

resizeToAvoidBottomPadding: false

You can put this line under the Scaffold widget and after that you will not get a bottom overflowed issue again. But in this case if your content is hiding behind the keyboard then it’ll not scroll and you won’t be able to see that hidden UI.

See example here:

Overflow error resolved but content is not scrolling

SingleChildScrollView:

In this option wrap your top widget inside SingleChildScrollView. 

Here you can see the column widget which is the parent of all login design components.

column widget is highlighted

So we wrap this column widget with SingleChildScrollView and we can scroll this while the keyboard is open. 

child: SingleChildScrollView(
  child: Column(
     //your whole child UI content here
  ),
),

After this you can get perfect output with scrolling content above the keyboard.

scrolling content while open keyboard

Conclusion: This article is published to help with solve bottom overflow issue with open keyboard.

Thank you for reading this article. if you need any help then you can contact us on info@tagnism.com

Leave a Reply

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