While developing the Flutter app, you may need to add multiple widgets inside the Column widget. But if you have a TextField widget with other widgets inside the Column, you may notice that when TextField opens the keyboard, your screen resizes and all the contents inside get squeezed. So in this tutorial, we’ll see how to fix the Flutter keyboard resize screen issue.
Here’s how it looks after applying the solution:

Here’s what we’ll cover:
The problem
The problem is when the soft keyboard is opened, the other widgets inside the Column are resized themselves to allow users to see all contents of the Column widget. Although this is good from the User experience perspective, sometime you may need to intentionally obscure the content when the keyboard is opened.

Steps to fix Flutter keyboard resize screen issue
Here are the steps to fix the keyboard resize screen issue in Flutter:
Step 1: Open the page where you have the TextField
widget.
Step 2: Locate the Scaffold
widget.
Step 3: Inside the Scaffold widget, add the resizeToAvoidBottomInset
property and set its value to false
.
Step 4: Re-run the app.
Code Example
@override Widget build(BuildContext context) { return Scaffold( resizeToAvoidBottomInset: false, <-- SEE HERE appBar: AppBar(), body: Center( child: Column( children: [ SizedBox( height: 50, ), Container( child: const TextField(), ), Expanded(child: Image.asset('assets/images/cat2.jpg')), ], ), ), ); }
Conclusion
In this tutorial, we learned how to fix the Flutter keyboard resize screen issue with a practical example. We first saw what is the real problem and why this happens, and then finally we saw the steps to fix this issue.
Would you like to check other interesting Flutter tutorials?