How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter?

To make an Image fill its parent, simply wrap it into a FittedBox:

FittedBox(  child: Image.asset('foo.png'),  fit: BoxFit.fill,)

FittedBox here will stretch the image to fill the space.(Note that this functionality used to be provided by BoxFit.fill, but the API has meanwhile changed such that BoxFit no longer provides this functionality. FittedBox should work as a drop-in replacement, no changes need to be made to the constructor arguments.)

Alternatively, for complex decorations you can use a Container instead of an Image – and use decoration/foregroundDecoration fields.

To make the Container will its parent, it should either:

• have no child
• have alignment property not null

Here's an example that combines two images and a Text in a single Container, while taking 100% width/height of its parent:

Container(  foregroundDecoration: const BoxDecoration(    image: DecorationImage(        image: NetworkImage(            'https://p6.storage.canalblog.com/69/50/922142/85510911_o.png'),        fit: BoxFit.fill),  ),  decoration: const BoxDecoration(    image: DecorationImage(        alignment: Alignment(-.2, 0),        image: NetworkImage(            'http://www.naturerights.com/blog/wp-content/uploads/2017/12/Taranaki-NR-post-1170x550.png'),        fit: BoxFit.cover),  ),  alignment: Alignment.bottomCenter,  padding: EdgeInsets.only(bottom: 20),  child: Text(    "Hello World",    style: Theme.of(context)        .textTheme        .display1        .copyWith(color: Colors.white),  ),),

The following will fit the image to 100% of container width while the height is constant. For local assets, use AssetImage

Container(  width: MediaQuery.of(context).size.width,  height: 100,  decoration: BoxDecoration(    image: DecorationImage(      fit: BoxFit.fill,      image: NetworkImage("https://picsum.photos/250?image=9"),    ),  ),)

Image fill modes:

• Fill - Image is stretched

  fit: BoxFit.fill

  

  ---

• Fit Height - image kept proportional while making sure the full height of the image is shown (may overflow)

  fit: BoxFit.fitHeight

  

  ---

• Fit Width - image kept proportional while making sure the full width of the image is shown (may overflow)

  fit: BoxFit.fitWidth

  

  ---

• Cover - image kept proportional, ensures maximum coverage of the container (may overflow)

  fit: BoxFit.cover

  

  ---

• Contain - image kept proportional, minimal as possible, will reduce it's size if needed to display the entire image

  fit: BoxFit.contain

  

Inside your Stack, you should wrap your background widget in a Positioned.fill.

return new Stack(  children: <Widget>[    new Positioned.fill(      child: background,    ),    foreground,  ],);