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

Maybe this will help... https://stackoverflow.com/questions/46551268/when-the-keyboard-appears-the-flutter-widgets-resize-how-to-prevent-this — Alexey, Mar 27 '18 at 09:05

score 38 · Accepted Answer · answered Feb 21 '19 at 11:11

38

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,
      ],
    ),
  ),
);

answered Feb 21 '19 at 11:11

Sinan Baymammadli

808
9
11

Additionally, if you want a background color and image, add a `color` under `BoxDecoration`. You can also change the alignment of the image with `alignment` under `DecorationImage` – Charles Crete Sep 14 '19 at 16:33
Thanks for this insight. – Yuvraj Singh Apr 02 '21 at 12:21

score 6 · Answer 2 · edited Jan 22 '20 at 23:04

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
        ],
      ),
    ),
  ],
);

I had to set top, left and right to 0.0 and set height to MediaQuery.of(context).size.height — E-Madd, Oct 15 '18 at 01:47

score 3 · Answer 3 · answered Aug 18 '18 at 22:24

3

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

answered Aug 18 '18 at 22:24

zuko

707
5
12

score 0 · Answer 4 · answered Apr 12 '21 at 17:18

You can try this, It works well

import 'package:flutter/material.dart';
class SignUpView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Container(
          decoration: BoxDecoration(
              image: DecorationImage(
        image: AssetImage("assets/images/background.png"),
        fit: BoxFit.cover,
      ))),
      Scaffold(
          resizeToAvoidBottomInset: false,
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            title: Text('NEW USER'),
            backgroundColor: Colors.transparent,
            elevation: 0,
          ),
          body: Padding(
              padding: EdgeInsets.all(10),
              child: ListView(children: <Widget>[])))
    ]);
  }
}

Making a persistent background image while staying responsive in Flutter

4 Answers4