I have an image that doesn't match the aspect ratio of my device's screen. I want to stretch the image so that it fully fills the screen, and I don't want to crop any part of the image.
CSS has the concept of percentages, so I could just set height and width to 100%. But it doesn't seem like Flutter has that concept, and it's bad to just hard code the height and width, so I'm stuck.
Here's what I have (I'm using a Stack since I have something in the foreground of the image):
Widget background = new Container( height: // Not sure what to put here! width: // Not sure what to put here! child: new Image.asset( asset.background, fit: BoxFit.fill, // I thought this would fill up my Container but it doesn't ), ); return new Stack( children: <Widget>[ background, foreground, ], );
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:
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), ), ),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With