Flutter出现像素溢出报错，求OrderItem组件代码的修复方案

问题根源 #

溢出报错由商品列表行的布局无宽度限制导致：现有代码中Row内的商品标题Text未做宽度约束，当商品名称过长时，文本宽度会超出屏幕可用横向空间，触发像素溢出。

修复方案 #

方案1：允许长标题自动换行（推荐） #

用Expanded组件包裹商品标题的Text，让标题只占用Row内除价格区域外的剩余空间，超出宽度自动换行：

(prod) => Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    // 新增Expanded包裹标题Text
    Expanded(
      child: Text(
        prod.title,
        style: TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.bold,
        ),
      ),
    ),
    Text(
      '${prod.quantity}x \$${prod.price}',
      style: TextStyle(
        fontSize: 18,
        color: Colors.grey,
      ),
    )
  ],
),

方案2：长标题单行截断显示 #

如果要求标题必须单行展示，可给标题Text添加溢出截断属性：

Text(
  prod.title,
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
  style: TextStyle(
    fontSize: 18,
    fontWeight: FontWeight.bold,
  ),
),

附加优化项 #

你现有代码中内层AnimatedContainer的动画时长参数写错，当前写的是Duration(microseconds: 300)（300微秒动画几乎无过渡效果），建议统一改为和外层一致的Duration(milliseconds: 300)。

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