CODEWITHSUNDEEP
flutterflutter-layoutflutter-image
user3612643
user3612643

Reputation: 5772

Leading Image overflows in ListTile

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.

Upvotes: 21

Views: 69867

Answers (2)

CopsOnRoad
CopsOnRoad

Reputation: 267704

Result

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

Result

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

Upvotes: 63

Harsh Bhikadia
Harsh Bhikadia

Reputation: 10875

Do this:

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

Upvotes: 8

Related Questions