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

I had this problem while setting autoFocus: true in a CupertinoTextField() and fixed it by setting resizeToAvoidBottomInset: false in Scaffold().

resizeToAvoidBottomPadding is deprecated now.

Use resizeToAvoidBottomInset.

Answer 2

set this on scaffold:

1-resizeToAvoidBottomInset: true,

2-use stack to set your background.

body: Stack(fit: StackFit.expand, children: <Widget>[
          Opacity(
              opacity: 0.5,
              child: Image.asset('lib/assets/images/background3.jpg',
                  fit: BoxFit.cover)),
          Padding(
            padding: EdgeInsets.all(20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Header1(),
                SizedBox(
                  height: 10,
                ),
                Tittle("Welcome to Bitetat's live repots"),
                Expanded(
                  child: SingleChildScrollView(
                      physics: AlwaysScrollableScrollPhysics(),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: <Widget>[
                          Container(

///// 3-there u can put ur fields

now you can enjoy nice back ground and your keyboard will not cover the fields and also scrollable.