When the keyboard appears, flutter widgets change. How to prevent this?

Question

I have a column of advanced widgets, for example:

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 TextField. When I click on this text box, the Android keyboard appears on the screen. This resizes the screen, so widgets are resized as follows:

Is there a way for the keyboard to “overlay” the screen so that my column does not change? If I do not use Expanded widgets and hardcode height for each widget, the widgets do not change, but I get a black and yellow striped error when the keyboard appears (because there is not enough space). It is also not flexible for all screen sizes.

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

Answer 1

In your Scaffold set the resizeToAvoidBottomInset property to false .

The resizeToAvoidBottomPadding property is deprecated ... In your Scaffold set the resizeToAvoidBottomPadding property to false .

Answer 2

Set resizeToAvoidBottomInset to false instead of resizeToAvoidBottomPadding , which is not recommended.

  return Scaffold( resizeToAvoidBottomInset : false, body: YourWidgets(), ); 

Answer 3

Depending on your use case, you might also consider using listview . This will scroll through the contents when there is not enough space. As an example, you can see a demo of a text field in the gallery application