Making a persistent background image while staying responsive in Flutter

Question

Asked by argamanza on March 26, 2018 (source).

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

Question answered by Sinan B (source).

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,
      ],
    ),
  ),
);
DART FLUTTER RESPONSIVE
SHARE: