When the keyboard appears the Flutter widgets resize How to prevent this

Question

I have a Column of Expanded widgets like this:

 return new Container(
      child: new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Expanded(
            flex: 1,
            child: convertFrom,
          ),
          new Expanded(
            flex: 1,
            child: convertTo,
          ),
          new Expanded(
            flex: 1,
            child: description,
          ),
        ],
      ),
    );

It looks like this:

convertFrom, includes a TextField. When I tap on this text field, the Android keyboard appears on the screen. This changes the screen size, so the widgets resize like this:

Is there a way to have the keyboard "overlay" the screen so that my Column doesn't resize? If I don't use Expanded widgets and hardcode a height for each widget, the widgets don't resize, but I get the black-and-yellow striped error when the keyboard appears (because there isn't enough space). This also isn't flexible for all screen sizes.

I'm not sure if this is an Android-specific or Flutter-specific.

Answer 1

This is a common issue in Flutter when the keyboard appears and causes the screen to resize. To prevent the widgets from resizing, you can wrap your Column inside a SingleChildScrollView widget and set its physics to NeverScrollableScrollPhysics. This will make the column scrollable and prevent it from resizing when the keyboard appears.

Here's how you can modify your code:

return Scaffold(
      body: SingleChildScrollView(
        physics: NeverScrollableScrollPhysics(),
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: convertFrom,
              ),
              Expanded(
                flex: 1,
                child: convertTo,
              ),
              Expanded(
                flex: 1,
                child: description,
              ),
            ],
          ),
        ),
      ),
    );

By wrapping the Column widget inside a SingleChildScrollView with NeverScrollableScrollPhysics, the column won't resize when the keyboard appears. The SingleChildScrollView will allow you to scroll the content of the column if the keyboard overlaps with it.

I hope this helps!