How to solve the leading overflow problem in ListTile?

Question

I'm having leading overflow issues with ListTile:

Leading widget consumes entire tile width. Please use a sized widget, or consider replacing ListTile with a custom widget (see https://api.flutter.dev/flutter/material/ListTile-class.html#material.ListTile.4)

'package:flutter/src/material/list_tile.dart':

package:flutter/…/material/list_tile.dart:1

Failed assertion: line 1204 pos 7: 'tileWidth != leadingSize.width || tileWidth == 0.0'

How can I solve it?

I referred to this question and tried the code from this answer. However, I still get the same error.

My code:

ListTile(
  leading: CircleAvatar(
    radius: 17.5,
    maxRadius: 17.5,
    minRadius: 17.5,
    backgroundColor: Colors.cyan,
    child: const Icon(
      Icons.timer_outlined,
      color: Colors.white,
    ),
  ),
  minLeadingWidth: 0.0,
  title: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Text(
        …,
        style: const TextStyle(color: Colors.cyan, fontSize: 16.0),
      ),
      Text(
        …,
        maxLines: 1,
        overflow: TextOverflow.ellipsis,
        style: TextStyle(color: Color.fromARGB(255, 117, 117, 117), fontSize: 16.0 * 0.8),
      ),
    ],
  ),
  …
),

Feel free to leave a comment if you need more information.

How to solve the leading overflow problem in ListTile? I would appreciate any help. Thank you in advance!

Answer 1

You Just need to Remove:

maxRadius: 17.5,
minRadius: 17.5,

 ListTile(
      leading: CircleAvatar(
        radius: 17.5,
        backgroundColor: Colors.cyan,
        child: const Icon(
          Icons.timer_outlined,
          color: Colors.white,
        ),
      ),
      minLeadingWidth: 0.0,
      title: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
        Text(
        "abc",
        style: const TextStyle(color: Colors.cyan, fontSize: 16.0),
      ),
      Text("aa",
      maxLines: 1,
      overflow: TextOverflow.ellipsis,
      style: TextStyle(color: Color.fromARGB(255, 117, 117, 117), fontSize: 16.0 * 0.8),
),
],
),
),