Can't fill background with an image

Question

I am new here so I apologise in advance for any mistakes that might violate the rules of this platform.

I have a problem with filling my android app with a background image. I've tried to follow this, but I got a rendering exception.

The code, which doesn't use the [SizedBox] class looks like this:

return Scaffold(
      appBar: new AppBar(title: Text("Progresso nel edilizia")),

      body: SingleChildScrollView(
          child: Container(
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/login_background.jpg'),
                fit: BoxFit.cover
              )
            ),
            child: LoginBody(),
        ) 
      ),
    );

The output: https://ibb.co/0srf6dN

score 0 · Answer 1 · answered Jun 14 '19 at 11:47

0

Try below code

   return Scaffold(
  body: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage("assets/login_background.jpg"),
        fit: BoxFit.cover,
      ),
    ),
  ),
);

answered Jun 14 '19 at 11:47

Dharmender Manral

1,504
1
6
7

It works, but if I get rid of [SingleChildScrollView] I get a rendering exception whenever I press the password textfield ( image of the UI in the post ). – justanewbie Jun 14 '19 at 12:17

score 0 · Answer 2 · answered Jun 14 '19 at 15:02

Try this but make sure the image you are using has a correct aspect ratio to fit the height.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(title: Text("Progresso nel edilizia")),
      body: SingleChildScrollView(
          child: Container(
        height: MediaQuery.of(context).size.height,
        decoration: const BoxDecoration(
            image: DecorationImage(
                image: AssetImage('assets/login_background.jpg'),
                fit: BoxFit.fitHeight)),
        child: Container(),
      )),
    );
  }

score 0 · Answer 3 · answered Jun 14 '19 at 23:55

Use a Stack with a container using the full width and height of the screen on the background. Like this:

return Scaffold(
  appBar: AppBar(title: Text("Progresso nel edilizia")),
  body: Stack(
    children: <Widget>[
      Container(
        width: double.infinity,
        height: double.infinity,
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/login_background.jpg'),
            fit: BoxFit.cover,
          ),
        ),
      ),
      SingleChildScrollView(
        child: LoginBody(),
      ),
    ],
  ),
);

Can't fill background with an image

3 Answers3