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

Question

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

score 169 · Answer 1 · edited Oct 02 '19 at 16:16

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

How can I a add a fade in image widget here? I don't think we can. — nick.tdr, Feb 26 '19 at 19:55
Ty, I have I think newer version and I did: _SizedBox.expand(child: Image.asset("assets/bg.png", fit: BoxFit.fill))_ — Ido, May 26 '19 at 18:45
so why is the `fit` parameter still present in the various Image constructors? What's the use, if it has been de facto replaced by FittedBox? — Wecherowski, Feb 28 '20 at 10:30
For me, it didn't work with FittedBox. But @Ido 's comment to use SizedBox.expand() did work for me. Thanks — Alex Roy, Dec 12 '20 at 06:16

score 128 · Answer 2 · answered Jan 20 '19 at 12:17

128

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
```

answered Jan 20 '19 at 12:17

Jossef Harush Kadouri

32,361
10
130
129

9

Never use MediaQuery to make an widget fill its parent. That's not what you want – Rémi Rousselet Mar 16 '19 at 10:10
1

@RémiRousselet can you explain reason for that (or give me a link to that reason) .Thanks. – dilshan Jun 09 '20 at 16:56
I will go with "fit: BoxFit.cover,". Thanks. – Kamlesh Oct 27 '20 at 11:12
This deserves an extra up-vote for the awesome examples of each of the fit modes. – Turkey Jun 28 '22 at 01:37

score 66 · Answer 3 · answered Aug 17 '17 at 21:51

66

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

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

answered Aug 17 '17 at 21:51

Mary

18,347
23
59
76

thanks for this `Stack` widget overlay, I were searching for this widget in `Flutter`, by using this it is possible for me to `Show Container above Image`, cheers! – ArifMustafa Aug 25 '19 at 03:39

score 44 · Answer 4 · edited Feb 24 '21 at 20:34

44

For me, to develop for web, works fine the following:

Image(
  image: AssetImage('lib/images/portadaSchamann5.png'),
  alignment: Alignment.center,
  height: double.infinity,
  width: double.infinity,
  fit: BoxFit.fill,
),

edited Feb 24 '21 at 20:34

John Conde

217,595
99
455
496

answered Feb 24 '21 at 17:38

CNK

567
5
6

1

this seems to be canon too: [`SizedBox.expand`](https://api.flutter.dev/flutter/widgets/SizedBox/SizedBox.expand.html) uses `double.infinity` for its values too. – ted Dec 29 '22 at 00:54

score 18 · Answer 5 · answered Nov 14 '20 at 19:19

Might not be exactly what the OP was looking for, but this page is where I found myself after looking for the problem, so sharing this for everyone with similar issue :)

Stack's fit property did the trick for my needs. Otherwise Image inside (OctoImageIn my case) was padded and providing other Image.fit values did not give any effect.

Stack(
  fit: StackFit.expand, 
  children: [
    Image(
      image: provider,
      fit: BoxFit.cover,
    ),
    // other irrelevent children here
  ]
);

SwiftNinjaPro · Answer 6 · 2019-06-08T13:56:00.270

Your Question contains the first step, but you need width and height. you can get the width and height of the screen. Here is a small edit

//gets the screen width and height
double Width = MediaQuery.of(context).size.width;
double Height = MediaQuery.of(context).size.height;

Widget background = new Image.asset(
  asset.background,
  fit: BoxFit.fill,
  width: Width,
  height: Height,
);

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

You can also use Width and Height to size other objects based on screen size.

ex: width: Height/2, height: Height/2 //using height for both keeps aspect ratio

`fit: BoxFit.fill,` on Image was a life saver, thanks :) – STEEL Aug 25 '20 at 11:07 — STEEL, Aug 25 '20 at 11:07

score 6 · Answer 7 · edited Aug 20 '18 at 13:49

6

I think that for your purpose Flex could work better than Container():

new Flex(
    direction: Axis.vertical,
    children: <Widget>[
      Image.asset(asset.background)
    ],
   )

edited Aug 20 '18 at 13:49

harm

10,045
10
36
41

answered Aug 06 '18 at 14:16

M_Lude

345
4
14

You just saved my life - :) Perfect for me. – iPatel Aug 23 '23 at 06:54

score 5 · Answer 8 · edited Jun 29 '21 at 08:14

5

This should work,

Image.asset('assets/bg.jpg',fit: BoxFit.cover,),

edited Jun 29 '21 at 08:14

Slava Rozhnev

9,510
6
23
39

answered Jun 28 '21 at 09:13

klinsman Agam

80
1
2

This. You can also BoxFit.fitWidth, fitHeight and others. – George Jan 16 '22 at 20:49

score 5 · Answer 9 · answered Feb 22 '22 at 05:58

5

The best example for this question I found on this page: https://flutterbeads.com/set-background-image-in-flutter/

By using BoxDecoration and DecorationImage:

Container(
  constraints: BoxConstraints.expand(),
  decoration: const BoxDecoration(
    image: DecorationImage(
        image: AssetImage("assets/images/cat2.jpg"), 
        fit: BoxFit.cover),
  )

answered Feb 22 '22 at 05:58

zakb

91
1
5

Thank you, Thank You, Thank you, Thank you.. I was literally banging my head on this – Debasis Sil Aug 17 '22 at 11:25

score 4 · Answer 10 · answered May 11 '20 at 15:34

4

None of the above answers worked for me. And since there is no accepted answer, I found the following extended my image from horizontal edge to horizontal edge:

Container ( width: MediaQuery
                    .of(context)
                    .size
                    .width,
                child: 
                  Image.network(my_image_name, fit: BoxFit.fitWidth )
              )

answered May 11 '20 at 15:34

E.Bradford

783
7
21

This answer works when you only want to fit the image to full width without stretching it – Saurav Panda Jul 15 '20 at 14:32

score 4 · Answer 11 · edited Oct 30 '20 at 03:26

4

Visit https://youtu.be/TQ32vqvMR80 OR

For example if parent contrainer has height: 200, then

Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: NetworkImage('url'),
                fit: BoxFit.cover,
              ),
            ),
          ),

edited Oct 30 '20 at 03:26

jrh

764
13
31

answered Sep 06 '20 at 10:34

Raj A

544
9
21

score 4 · Answer 12 · edited Sep 13 '22 at 18:42

This will work if you want to add a fit background image in Flutter:

class Myname extends StatelessWidget {
  const Myname({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/aj.jpg"),
              fit: BoxFit.cover,
            ),
          ),
          child: Scaffold(
            backgroundColor: Colors.transparent,
            body: Column(),
          ),
        ),
      ),
    );
  }
}

Now you can add the rest of the things inside the Column()

score 3 · Answer 13 · answered Dec 21 '20 at 19:21

3

I set width and height of a container to double.infinity like so:

Container(
        width: double.infinity,
        height: double.infinity,
        child: //your child
)

answered Dec 21 '20 at 19:21

MobileMon

8,341
5
56
75

This won't work for the child of the container, just the container. – Ojonugwa Jude Ochalifu Feb 22 '21 at 11:22

score 2 · Answer 14 · answered Oct 12 '18 at 21:34

2

For filling, I sometimes use SizedBox.expand

answered Oct 12 '18 at 21:34

KnightsForce

479
3
8

score 2 · Answer 15 · answered Jan 07 '21 at 12:19

I ran into problems with just an FittedBox so I wrapped my Image in an LayoutBuilder:

LayoutBuilder( 
   builder: (_, constraints) => Image(
      fit: BoxFit.fill,
      width: constraints.maxWidth,
      image: AssetImage(assets.example),
   ),
)

This worked like a charm and I suggest you give it a try.
Of course you can use height instead of width, this is just what I used.

score 1 · Answer 16 · answered May 19 '20 at 19:59

1

For me, using Image(fit: BoxFit.fill ...) worked when in a bounded container.

answered May 19 '20 at 19:59

sean.boyer

1,187
16
24

score 1 · Answer 17 · answered Sep 22 '20 at 11:29

This worked for me

class _SplashScreenState extends State<SplashScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: FittedBox(
        child: Image.asset("images/my_image.png"),
        fit: BoxFit.fill,
      ),);
  }
}

score 0 · Answer 18 · edited Jun 06 '19 at 09:08

0

Try setting contentPadding

ListTile(
  contentPadding: EdgeInsets.all(0.0),
  ...
)

edited Jun 06 '19 at 09:08

barbsan

3,418
11
21
28

answered Jun 06 '19 at 09:03

Moses

7
1
5

score 0 · Answer 19 · answered Dec 22 '21 at 14:06

I didn’t find answer in this post, But I found the fix:

        Positioned(
            bottom: 0,
            top: 0,
            child: Image.asset(
          'assets/images/package_bg.png',
        )),

This code make image fit to height on the stack.

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

19 Answers19

Image fill modes:

Linked