Making a persistent background image while staying responsive in Flutter

Question

I'm creating a login screen, and i have this background image, the problem is when the user clicks one of the TextFields and the keyboard pops, the background image changes its size to fit the new screen size (excluding the keyboard).

I want the background to stay persistent and the same size, i would use BoxFit.none, but i'm afraid it will hurt the responsiveness of the app.

Here's the code:

new Container(
      decoration: new BoxDecoration(
          color: Colors.red,
          image: new DecorationImage(
              fit: BoxFit.cover,
              image: new AssetImage(
                  'assets/images/splash_screen/background.png'))),
      child: new Center(
        child: new ListView(
          physics: new PageScrollPhysics(),
          children: <Widget>[ //Login screen content ],
        ),
      ),
    );

I also tried to define BoxConstraints with minHeight of the device screen but it doesn't help, and used Stack as well but with not luck.

Here's what i mean by changing dimensions: No Keyboard / With Keyboard

Answer 1

Put your Scaffold as a child of a Container and make it transparent

final emailField = TextFormField(
  decoration: InputDecoration(
    hintText: "Email",
  ),
);

return Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/bg.png'),
      fit: BoxFit.cover,
    ),
  ),
  child: Scaffold(
    backgroundColor: Colors.transparent,
    body: ListView(
      children: <Widget>[
        emailField,
      ],
    ),
  ),
);

Answer 2

Try using a Stack, with your image in a Positioned, with a BoxFit of fill. Then, set top: 0.0. This way, its height shouldn't be influenced by the height of the bottom of the screen (i.e. it shouldn't change when the keyboard comes up), and its size should remain the same. Example:

return Stack(
  children: <Widget>[
    Positioned(
      top: 0.0,
      child: Image.asset(
        'assets/images/splash_screen/background.png',
        fit: BoxFit.fill,
      ),
    ),
    Center(
      child: ListView(
        physics: PageScrollPhysics(),
        children: <Widget>[ 
           //Login screen content
        ],
      ),
    ),
  ],
);

Answer 3

Try going to to your Scaffold (or use one) and set resizeToAvoidBottomPadding = false