Flutter how to handle image with fixed size inside box?

Question

I am new to Flutter and I like it but I am not comfortable building layouts.

I am working on an app that contains a ListView of Cards. Each card is inside a Container and contains an image (with fixed height and width) and a text.

I am not able to place the image correctly inside the Card. I want the image to cover the width of box. Thanks.

This is the code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'MyApp';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView(
          children: <Widget>[
              Container(
                    margin:EdgeInsets.all(8.0),
                    child: Card(
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
                        child: InkWell(
                           onTap: () => print("ciao"),     
                           child: Column(
                                children: <Widget>[
                                    ClipRRect(
                                      borderRadius: BorderRadius.only(
                                        topLeft: Radius.circular(8.0),
                                        topRight: Radius.circular(8.0),
                                      ),
                                      child: Image.asset(
                                        'img/britannia.jpg',
                                        width: 300,
                                        height: 150,
                                        fit:BoxFit.fill  

                                      ),
                                    ),
                                    ListTile(
                                      title: Text('Pub 1'),
                                      subtitle: Text('Location 1'),
                                    ),
                                ],
                           ),
                        ),
                    ),
              ),
          ],
        ),
      ),
    );
  }
}

Each Container has to be (for example) 150 height. What i want is scale the image according to height of Container (Container contains the card). I wish to show the image like first pic, despite source image dimensions. — Francesco Romano
– Francesco Romano, Commented Feb 26, 2019 at 13:03
Have you tried using the Expanded class? docs.flutter.io/flutter/widgets/Expanded-class.html — droidBomb
– droidBomb, Commented Feb 26, 2019 at 13:21
I have updated the code and the image. I have to wrap the Image widget or ClipRRect widget inside Expanded? — Francesco Romano
– Francesco Romano, Commented Feb 26, 2019 at 14:16
how to fit small image in big container in flutter ? Please suggest. Thanks. — Kamlesh
– Kamlesh, Commented Feb 2, 2021 at 10:11

anmol.majhail · Accepted Answer · 2019-02-26 14:49:19Z

You need to add - crossAxisAlignment: CrossAxisAlignment.stretch, in Column so that children can take up horizontal space.

Working Code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = 'MyApp';

return MaterialApp(
  title: title,
  home: Scaffold(
    appBar: AppBar(
      title: Text(title),
    ),
    body: ListView(
      children: <Widget>[
        Container(
          margin:EdgeInsets.all(8.0),
          child: Card(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
            child: InkWell(
              onTap: () => print("ciao"),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,  // add this
                children: <Widget>[
                  ClipRRect(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8.0),
                      topRight: Radius.circular(8.0),
                    ),
                    child: Image.network(
                        'https://placeimg.com/640/480/any',
                       // width: 300,
                        height: 150,
                        fit:BoxFit.fill

                    ),
                  ),
                  ListTile(
                    title: Text('Pub 1'),
                    subtitle: Text('Location 1'),
                  ),
                ],
              ),
            ),
          ),
        ),
        Container(
          margin:EdgeInsets.all(8.0),
          child: Card(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
            child: InkWell(
              onTap: () => print("ciao"),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  ClipRRect(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8.0),
                      topRight: Radius.circular(8.0),
                    ),
                    child: Image.network(
                        'https://placeimg.com/640/480/any',
                        // width: 300,
                        height: 150,
                        fit:BoxFit.fill

                    ),
                  ),
                  ListTile(
                    title: Text('Pub 1'),
                    subtitle: Text('Location 1'),
                  ),
                ],
              ),
            ),
          ),
        ),
        Container(
          margin:EdgeInsets.all(8.0),
          child: Card(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(8.0))),
            child: InkWell(
              onTap: () => print("ciao"),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  ClipRRect(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(8.0),
                      topRight: Radius.circular(8.0),
                    ),
                    child: Image.network(
                        'https://placeimg.com/640/480/any',
                        // width: 300,
                        height: 150,
                        fit:BoxFit.fill

                    ),
                  ),
                  ListTile(
                    title: Text('Pub 1'),
                    subtitle: Text('Location 1'),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    ),
      ),
    );
  }
}

output:

how to fit small image in big container in flutter ? Please suggest. Thanks.

Rahul Dange · Accepted Answer · 2020-05-30 10:00:20Z

30

I don't know how.. But this really worked to keep image with fixed size in container Just add Alignment in container

    Container(
      height: double.infinity,
      alignment: Alignment.center, // This is needed
      child: Image.asset(
        Constants.ASSETS_IMAGES + "logo.png",
        fit: BoxFit.contain,
        width: 300,
      ),
    );

answered May 30, 2020 at 10:00

Rahul Dange

2,68122 silver badges15 bronze badges

1 Comment

Cosmin Vacaru Over a year ago

Alignment strangely solved my problem too

Pedro R. · Accepted Answer · 2020-01-16 21:29:07Z

24

This worked for me

Image.network(imageUrl, fit: BoxFit.fitWidth,),

answered Jan 16, 2020 at 21:29

Pedro R.

6737 silver badges11 bronze badges

Comments

Hardik Hirpara · Accepted Answer · 2022-03-26 04:42:37Z

19

Put Image widget inside container and give alignment center to container and specific width-height to the image.

return Container(
      alignment: Alignment.center,// use aligment
      color: Color.fromRGBO(0, 96, 91, 1),
      child: Image.asset('assets/images/splash_logo.png',
        height: 150,
        width: 150,
      fit: BoxFit.cover),
    );

edited Mar 26, 2022 at 4:42

answered Mar 31, 2021 at 7:51

Hardik Hirpara

3,13124 silver badges37 bronze badges

Comments

Osama Sandhu · Accepted Answer · 2020-11-10 05:12:54Z

9

 Image.asset(
                  'assets/images/desert.jpg',
                  height: 150,
                  width: MediaQuery.of(context).size.width,
                  fit:BoxFit.cover

              )

answered Nov 10, 2020 at 5:12

Osama Sandhu

4217 silver badges12 bronze badges

Comments

Sandeep Pareek · Accepted Answer · 2021-08-20 04:43:43Z

child: Container(
              alignment: Alignment.center,// use aligment
              child: Image.asset(
                'assets/images/call.png',
                height: 45,
                width: 45,
                fit: BoxFit.cover,
              ),
            ),

Use this if you want with border

            Center(
          child: Container(
            margin: EdgeInsets.only(top: 75),
            width: 120,
            height: 120,
            alignment: Alignment.center,
            child: Image.asset(
              "assets/images/call.png",
              fit: BoxFit.cover,
              height: 45,
              width: 45,
            ),
            decoration: new BoxDecoration(
              color: Colors.white,
              borderRadius: new BorderRadius.all(new Radius.circular(120)),
              border: new Border.all(
                color: Colors.blue,
                width: 4.0,
              ),
            ),
          ),
        )

Mohamed Assem Ali · Accepted Answer · 2020-05-10 00:25:09Z

I used this and worked fine with me!

  Container(
                    width: MediaQuery.of(context).size.width,
                    height: 175,
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage(YOUTUBE_THUMBNAIL_PART_ONE +
                            video.key +
                            YOUTUBE_THUMBNAIL_PART_TWO),
                      ),
                    )),

Leonardo Rignanese · Accepted Answer · 2020-07-16 08:07:46Z

What you want to do is probably use the size of the bigger container. In that case your media should occupy the whole dedicate space:

return Container(
      alignment: Alignment.center,
      height: double.infinity,
      width: double.infinity,
      child: Image.asset(
        '', //TODO fill path
        height: double.infinity,
        width: double.infinity,
        fit: BoxFit.cover,
      ),
    );

You can play with the fit value:

BoxFit.cover will cover the whole container
BoxFit.fitWidth will fit the width and eventually put horizontal white bars to fill the space
BoxFit.fitHeight will fit the height and eventually put vertical white bars to fill the space

CopsOnRoad · Accepted Answer · 2021-02-03 17:08:25Z

4

All you need is fit property of Image class:

Image.asset(
  'your_image_asset',
  fit: BoxFit.fill, // Expands to fill parent (changes aspect ratio)
)

or

Image.asset(
  'your_image_asset',
  fit: BoxFit.cover, // Zooms the image (maintains aspect ratio)
)

answered Feb 3, 2021 at 17:08

CopsOnRoad

271k97 gold badges701 silver badges471 bronze badges

Comments

Ferdi · Accepted Answer · 2019-02-26 14:06:03Z

3

If doable with the fit property, I let this very clear cheat sheet (chapter fit Property) detail everything: https://medium.com/jlouage/flutter-boxdecoration-cheat-sheet-72cedaa1ba20

answered Feb 26, 2019 at 14:06

Ferdi

7884 silver badges14 bronze badges

2 Comments

Ferdi Over a year ago

Would you like to fit the witdh ?? Then fitWidth should do the trick, no ??

Ferdi Over a year ago

But why are you putting an height and width to your image ?? Then you won't have the desire effect... You should define the height to you card widget

Riad Rekab · Accepted Answer · 2020-12-11 09:29:13Z

1

I had the same problem, I just added in the Image.asset class the fit:BoxFit.fill after using the MediaQuery class to get the width of the screen**

    Container(
              child:Image.asset(link,fit: BoxFit.fill,)
              width: screensize.width,
              height: 150,
            ))

edited Dec 11, 2020 at 9:29

answered May 11, 2020 at 20:16

Riad Rekab

1291 silver badge8 bronze badges

2 Comments

Kirill Karmazin Over a year ago

there is no fit property in Container widget

Riad Rekab Over a year ago

@KirillKarmazin I just noticed the mistake I made. I edited my answer, now it should work. Thanks fo noticing.

yobo zorle · Accepted Answer · 2024-02-12 07:32:57Z

1

Sample;

Image.asset(
                        'assets/img/premium_user.png',
                        fit: BoxFit.contain,
                        height: 20,
                      ),

Then set preferred height.

answered Feb 12, 2024 at 7:32

yobo zorle

4185 silver badges9 bronze badges

Comments

Nolca · Accepted Answer · 2023-10-13 04:58:11Z

crossAxisAlignment: CrossAxisAlignment.center,
fit: BoxFit.fitWidth,
width: double.infinity, height: 100,

Example:

Column(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Image.network(userinfo.avatar ?? '',
        fit: BoxFit.fitWidth,
        width: double.infinity,
        height: 100,
        errorBuilder: (context, error, stackTrace) => Image.asset(
              'assets/niko_huh.png',
              fit: BoxFit.fitWidth,
              width: double.infinity,
              height: 100,
            )),

Tài Nguyễn Anh · Accepted Answer · 2024-04-19 15:55:31Z

0

Image Widget will make parent Widget reduce size some how, i think the key is assign width or height of parent Widget (Container or SizedBox) to double.infinity, and you will able to use BoxFit easier.

answered Apr 19, 2024 at 15:55

Tài Nguyễn Anh

12 bronze badges

Comments

0xShakhawat · Accepted Answer · 2024-08-22 19:22:50Z

0

Add this line in Column

crossAxisAlignment: CrossAxisAlignment.stretch,

It will work fine

answered Aug 22, 2024 at 19:22

0xShakhawat

313 bronze badges

Collectives™ on Stack Overflow

Flutter how to handle image with fixed size inside box?

15 Answers 15

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Related