How can I avoid the background image to shrink when my keyboard is active?

Question

I would like to have a background image with text inputs but I don't know which widget I should use to avoid the background image to shrink when my keyboard is active.

Here you can find two screen shots of the problem and my code:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var backgroundImage = new BoxDecoration(
        image: new DecorationImage(
            image: new AssetImage('assets/forest.jpg'), fit: BoxFit.cover));

    return new MaterialApp(
        home: new Scaffold(
            body: new Stack(
      children: <Widget>[
        new Container(
          decoration: backgroundImage,
        ),
        new TextField()
      ],
    )));
  }
}

closed keyboard active keyboard

Ammadis

Use resizeToAvoidBottomInset: false, resizeToAvoidBottomPadding is deprecated. Flutter login page with background Example - – Toh

Answer 1

You can use the property resizeToAvoidBottomPadding from Scaffold :

Scaffold(
     resizeToAvoidBottomPadding: false,
     ...

Jahdai

This works great but what if I have content that I would also like to scroll? Lets say I have form with TextFormField and I want to see it above keyboard - so it needs to scroll up with keyboard. Any idea? – Kampmann

@ŽanFras, please look https://mcmap.net/q/101125/-how-can-i-avoid-the-background-image-to-shrink-when-my-keyboard-is-active for scrollable screen with static background image – Quadruplicate

Answer 2

Put Container outside of Scaffold, and make Scaffold as a child of Container with the background image.

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

Exhibitioner

Answer 3

It's the default functionality of the flutter to keep UI above the keyboard so if you set resizeToAvoidBottomInset : false then you will lose the functionality of keeping your UI components above the keyboard

To have a background image in your application, and not to shrink it better way is to do it like this

Container(
    decoration: BoxDecoration(
    color: primaryColor,                                       
    image: DecorationImage(image: AssetImage(AppImages.appBg)),// background image above color
),
child: SafeArea(
    child: Scaffold(
        backgroundColor: Colors.transparent,                          //**IMPORTANT**
        body: //All Ui code here//),
),

It is necessary to set Scaffold backgroundColor: Colors.transparent otherwise, you won't be able to see your background image

Peccadillo