Flutter Column内文本溢出报错，给Text套Expanded无效怎么解决？

问题原因 #

你之前给Text套Expanded不生效的核心原因是Expanded只能直接放在Flex类组件（Row/Column）的直接子节点层级才会生效，本次报错的溢出来源于Positioned.fill内的Row组件，它的两个直接子节点分别是左侧的Icon容器、右侧的条件判断返回的Column，右侧Column没有被限制宽度，文本长度超过Row剩余宽度时就会触发横向溢出。

解决方法 #

1. 给Row中右侧的条件判断返回的Column外层包裹Expanded组件，强制Column仅占用Row除左侧Icon外的剩余宽度，不会横向撑破容器
2. 若需要文本自动换行，确认Text组件开启了softWrap: true（默认开启，宽度被限制后会自动换行），如果需要限制最大行数可以额外配置maxLines和overflow属性。

修改后的核心代码段如下：

child: Row(
  children: [
    Container(
      padding: EdgeInsets.all(8.0),
      child: Icon(Icons.supervised_user_circle, color: blue, size: 50.0,),
    ),
    // 给右侧所有可能返回的Column外层统一套Expanded
    Expanded(
      child: entitlements.value.identifier=='50 People'
          ? Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                getText('50 People'),
                getSubText('50 People')
              ],
            )
          : entitlements.value.identifier=='20 People'
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  getText('20 People'),
                  getSubText('20 People')
                ],
              )
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  getText('10 People'),
                  getSubText('10 People')
                ],
              ),
    )
  ],
),

如果你的getText和getSubText是自定义封装的Text返回方法，需要确认方法内部没有给Text设置固定宽度、也没有关闭自动换行属性softWrap: false。

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