如何防止水平方向溢出？

Question

我正在努力进行这项工作，但我尝试了所有尝试，但仍然无法完成这项工作。因此，具有以下结构：

Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      CircleAvatar(
        radius: 40.0,
        backgroundImage: Image
            .network(
          '$thumbnail',
          fit: BoxFit.cover,
        )
            .image,
      ),
      SizedBox(
        width: 20,
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Really biiiig drink name here',
            style: TextStyle(
              color: Colors.white,
              fontSize: 28
            ),
          ),
          Text(
            'Category goes here',
            style: TextStyle(
              color: Colors.white.withOpacity(.8)
            ),
          ),
        ],
      ),
    ],
  ),

它呈现如下：

overflow

我如何在不为父窗口小部件定义固定宽度的情况下裁剪或包装标题文本？

Answer 1

将Expanded添加到内部列中以为其定义宽度。

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    CircleAvatar(
      radius: 40.0,
      backgroundImage: Image.network(
        '$thumbnail',
        fit: BoxFit.cover,
      ).image,
    ),
    SizedBox(
      width: 20,
    ),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Really biiiig drink name here',
            style: TextStyle(
              color: Colors.white,
              fontSize: 28
            ),
          ),
          Text(
            'Category goes here',
            style: TextStyle(
              color: Colors.white.withOpacity(.8)
            ),
          ),
        ],
      ),
    ),
  ],
);

Answer 2

如果将扩展添加到发生溢出的位置，则应该可以解决问题。

Answer 3

使用Expanded小部件来防止视图溢出