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.

Answer 1

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 an use

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

Answer 2

Do this:

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

Answer 3

My code and with a picture with subtitle and tile looks like below

  Widget _buildRow(WordPair pair) {
    return ListTile(
      title: Text(
        'Title of messages comes here',
        style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
      ),
      subtitle: Text(
        pair.asPascalCase,
        style: _font,
      ),
      leading: ConstrainedBox(
        constraints: BoxConstraints(
          minWidth: 44,
          minHeight: 44,
          maxWidth: 44,
          maxHeight: 44,
        ),
        child: Image.asset('assets/message_lock.png', fit: BoxFit.cover),
      ),
    );
  }