Flutter - Prevent Keyboard Pushes Screen Content Up

This tutorial shows you how to prevent the on-screen keyboard from resizing or pushing up the content of a Flutter application.

An application may show an on-screen keyboard on certain conditions. For example, when the user is editing a text field. If you create the application using Flutter, you may see that the widgets or the content of the screen is pushed up when the keyboard appears, as shown in the animation below.

If you don't expect that behavior, there are some workarounds to fix it. I'm going to show you in the examples below.

Set resizeToAvoidBottomInset to false

The constructor of Scaffold widget has an argument named resizeToAvoidBottomInset. It's used to set whether the Scaffold's floating widgets should resize to avoid overlapping the on-screen keyboard. The default value is true, which means the widgets resize themselves when the on-screen keyboard is shown to avoid overlapping the keyboard. As a result, the space for the widgets is reduced to make a space for the keyboard at the bottom. To change it, you can pass the resizeToAvoidBottomInset argument to the Scaffold widget and set the value to false.

  Scaffold(
    resizeToAvoidBottomInset: false,
    // other arguments
  )

Use a Scrollable Widget

In the previous example, we managed to make the Scaffold's body not resized when the on-screen keyboard is displayed. However, there is another problem. When the on-screen keyboard is visible, the text field is overlapped by the keyboard. As a result, it's not visible to the user. The solution is to make the body scrollable if it doesn't fit into the screen.

In Flutter, there are several ways to make a widget scrollable. A simple solution is by using the SingleChildScrollView and passing the widget that you want to make it scrollable as the child.

  class Example2 extends StatelessWidget {
  
    const Example2({super.key});
  
    @override
    Widget build(BuildContext context) {
      return SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            children: [
              Container(
                color: Colors.teal,
                height: 300,
                child: const Center(
                  child: Text(
                    'Woolha.com',
                    style: TextStyle(color: Colors.white, fontSize: 48.0),
                  ),
                ),
              ),
              const TextField(
                decoration: InputDecoration(
                  hintText: 'Input Text',
                ),
              ),
            ],
          ),
        ),
      );
    }
  }

Besides SingleChildScrollView, there are other widgets that support a scrollable view such as ListView and GridView.

Summary

To prevent the on-screen keyboard from resizing or pushing up the content of your Flutter application, you can pass resizeToAvoidBottomInset to the constructor of the Scaffold widget. Another alternative is by using a scrollable widget.