Keyboard pushes the content up / resizes the screen

Question

Edit:

I got a report that this is a duplicate of When the keyboard appears, the Flutter widgets resize. How to prevent this?. While this is related, it is a different issue. I want the keyboard to overlap the UI until it reaches the TextField that has focus. This is default behavior on Android

Original:

I am an Android developer and just started with Flutter. I wanted to create a log in screen. I wanted an image above the TextField's. So I thought, I use a Stack to have the image on the background and some TextField's below.

The issue is that as soon as the keyboard appears, it pushes all content up. On Android, usually the keyboard only pushes up if necessary and only until it reaches the EditText.

I tried setting resizeToAvoidBottomPadding to false, but then nothing moves (of course) and the TextField's get covered by the keyboard.

I remember from playing around with iOS in the past, this is default behavior, maybe I should reconsider my layout?

At the moment, I wrap it in a ListView so that the user is able to scroll when the keyboard appears.

This is my layout (just for testing)

@override
Widget build(BuildContext context) {
  this.context = context;
  return new Scaffold(
      key: _scaffoldKey,
      body: new Stack(
          children: <Widget>[loginImage(), new Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[new TextField(), new TextField(),
        new TextField(), new TextField(),
        new TextField(), new TextField()],
      )])
  );
}

:

Answer 1

It's 2025. Flutter has evolved much and so are the workarounds to fix this problem. For mobile apps Scaffold's resizeToAvoidBottomInset property is enough but for mobile web browsers the issue is different on iOS and Android.

For iOS web, the trick is to listen to didChangeMetrics and remove focus when keyboard is hidden by the Done button on the keyboard accessory view.

For android web, you have to set resizeToAvoidBottomInset to false but only for android web and not others.

I know this is confusing but the solution is indeed complex but it handles all scenarios. See this post which explains it step by step: https://cleancodestack.com/flutter-keyboard-issues-fix-ios-android-and-web/