如何解决Flutter中ListTile的leading溢出问题？

报错信息 #

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/list_tile-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'

问题场景 #

使用ListTile时出现上述leading溢出报错，尝试过相关解决方案但问题依旧，当前代码如下：

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

解决方案 #

1. 给leading组件添加固定尺寸包裹 #

ListTile的断言要求leading不能占据整个tile宽度，给CircleAvatar套一个SizedBox指定固定宽高，确保尺寸约束：

ListTile(
  leading: SizedBox(
    width: 35, // 对应CircleAvatar直径（17.5*2）
    height: 35,
    child: CircleAvatar(
      radius: 17.5,
      backgroundColor: Colors.cyan,
      child: const Icon(Icons.timer_outlined, color: Colors.white),
    ),
  ),
  minLeadingWidth: 0.0,
  title: ...,
),

2. 调整ListTile的布局间隙参数 #

配合minLeadingWidth设置horizontalTitleGap，给title区域预留足够空间：

ListTile(
  leading: ...,
  minLeadingWidth: 0.0,
  horizontalTitleGap: 8.0, // 控制leading和title之间的间距
  title: ...,
),

3. 优化title内部布局 #

当前title中的Row没有约束宽度，可能导致它试图占据全部空间，和leading冲突。给title的Row套上Expanded，确保它只占用剩余空间：

ListTile(
  leading: ...,
  minLeadingWidth: 0.0,
  title: Expanded(
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(...),
        Text(...),
      ],
    ),
  ),
),

4. 改用自定义Row替代ListTile #

如果ListTile的布局约束无法满足需求，直接用Row自定义布局更灵活，避免ListTile的内部断言限制：

Row(
  children: [
    CircleAvatar(
      radius: 17.5,
      backgroundColor: Colors.cyan,
      child: const Icon(Icons.timer_outlined, color: Colors.white),
    ),
    const SizedBox(width: 8), // 自定义间距
    Expanded(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            "...",
            style: const TextStyle(color: Colors.cyan, fontSize: 16.0),
          ),
          Text(
            "...",
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(color: const Color.fromARGB(255, 117, 117, 117), fontSize: 12.8),
          ),
        ],
      ),
    ),
  ],
),

内容的提问来源于stack exchange，提问作者My Car