Solving Flutter Keyboard Resize Screen Issue  – The RIGHT Way

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
• Steps to fix Flutter keyboard resize screen issue

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?