Flutter 含Row、Column子组件的Container如何实现自适应子组件大小？

问题原因 #

Column组件默认的主轴尺寸配置为MainAxisSize.max，会主动撑满父级提供的所有可用空间，因此外层无固定尺寸的Container会被其撑满全屏；手动固定Container高度时，若动态渲染的子组件总高度超出固定值，就会触发RenderFlex overflow溢出报错。

解决方案 #

给代码中的Column组件添加mainAxisSize: MainAxisSize.min属性即可，该配置会让Column仅收缩到所有子组件所需的最小高度，外层Container也会随之自适应到子组件的总尺寸，无需手动固定宽高，动态数据更新时也会自动适配不会出现溢出。

修改后代码 #

Container(
 decoration: BoxDecoration(
  borderRadius: BorderRadius.circular(35),
  color: Colors.orange.shade400,
 ),
 child: Padding(
  padding: const EdgeInsets.symmetric(vertical: 15.0, horizontal: 25.0),
  child: Column(
   // 新增此行配置
   mainAxisSize: MainAxisSize.min,
   children: <Widget>[
    Text("PEAK/THURSDAY"),
    Text("\$24,355"),
    weeklyExpenseBuilder(), // 内部返回带Text组件的Row
   ],
  ),
 ),
)

补充说明 #

若weeklyExpenseBuilder返回的Row内部文本内容过长导致横向溢出，可给Row内的文本组件包裹Expanded或Flexible组件，设置文本自动换行即可。

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