Leading Image overflows in ListTile

flutter flutter-layout flutter-image
user3612643 picture user3612643 · Apr 12, 2019 · Viewed 32.1k times · Source

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.

Answer

CopsOnRoad picture CopsOnRoad · Apr 12, 2019

enter image description here

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

enter image description here

If you wanna use rectangle image, you an use 

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

Related questions

Flutter drawer background image

I wonder if i can use background image instead of color in flutter app drawer header, Is there any way? I am able to customize he color but i am wonder if is there any property to alter the color …

Read More
How to set the width of a RaisedButton in Flutter?

I have seen that I can't set the width of a RaisedButton in Flutter. If I have well understood, I should put the RaisedButton into a SizedBox. I will then be able to set the width or height of the …

Read More
Button Width Match Parent

I want to know that how can I set a width to match parent layout width new Container( width: 200.0, padding: const EdgeInsets.only(top: 16.0), child: new RaisedButton( child: new Text( "Submit", style: new TextStyle( color: Colors.white, ) ), colorBrightness: Brightness.dark, …

Read More