Leading Image overflows in ListTile

Question

I have a ListView with ListTile. Each ListTile has a title with Text, subtitle with Text, and leading with an Image.

Now, the Image is too big and vertically stretches into the next row, overlapping the Image there.

How can I make sure that the Image stays within the bounds?

EDIT:

I’d like not to give the image a fixed size, but rather let it adjust to the height of the list tile as given by title+subtitle’s intrinsic height.

score 60 · Accepted Answer · edited Jan 26 '23 at 11:44

60

You should use CircleAvatar as leading in your ListTile. It has a radius property also that you can change, if you wish.

leading: CircleAvatar(
  backgroundImage: AssetImage("..."), // No matter how big it is, it won't overflow
),

If you wanna use rectangle image, you can use

leading: ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: 44,
    minHeight: 44,
    maxWidth: 64,
    maxHeight: 64,
  ),
  child: Image.asset(profileImage, fit: BoxFit.cover),
),

edited Jan 26 '23 at 11:44

My Car

4,198
5
17
50

answered Apr 12 '19 at 09:47

CopsOnRoad

237,138
77
654
440

Do we also have a BoxAvatar? – user3612643 Apr 12 '19 at 12:03
NO there is no BoxAvatar, the other option you can use `ConstrainedBox` and give it min/max width/height according to your needs. – CopsOnRoad Apr 12 '19 at 12:24
Hi, im having "FlutterError (Unable to load asset: http/www.blabla......." exception while trying to use it. I got the same exception in [Harsh Bhikadia](https://stackoverflow.com/a/55642120/16002501) solution. Do you know what it could cause it? – Tim's Dec 29 '21 at 19:22
@Tim's You may want to take a look at [this](https://stackoverflow.com/a/57229784/6618622) answer on how to add image to your project. – CopsOnRoad Dec 29 '21 at 19:32
@CopsOnRoad but im pulling the images from web (From firebase storage). How can i implement the same method with web images? I had no problem with using images in other places. But in listTile i got this. – Tim's Dec 29 '21 at 19:37
1

@Tim's Can you please ask a separate question, I can't help you without seeing your code. Thanks – CopsOnRoad Dec 29 '21 at 19:41

score 6 · Answer 2 · answered Apr 11 '19 at 22:36

6

Do this:

leading: SizedBox(
  height: 100.0,
  width: 100.0, // fixed width and height
  child: Image.asset(...)
)

answered Apr 11 '19 at 22:36

Harsh Bhikadia

10,095
9
49
70

3

I’d like to make the image adjust to the height of the Title+Subtitle. – user3612643 Apr 12 '19 at 05:29
The Image itself also has a fit : BoxFit property that didn’t work. Why should FittedBox be better? – user3612643 Apr 12 '19 at 12:04

Leading Image overflows in ListTile

2 Answers2

Linked