Flutter中Card内部嵌套Column出现溢出错误，该如何解决？

错误原因 #

Column默认不会给子组件施加高度约束，BarChart组件未指定固定高度时会尝试占用尽可能大的空间，最终超出Card的可视区域范围触发溢出。单独放置BarChart时父组件会自动传递约束，因此可以正常渲染。

修复方案 #

任选以下一种方案修改布局代码即可： #

方案1：用Expanded包裹BarChart组件（推荐） #

Expanded会让BarChart自动占用Column内除文本之外的全部剩余可用空间，自动适配高度不会溢出，同时给Column加上mainAxisSize: MainAxisSize.min可以让整个Card只占用实际需要的高度，不会撑满全屏，修改后代码如下：

Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(15),
      child: Card(
        shadowColor: Colors.red,
        elevation: 20,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        color: Color(0xff240046),
        child: Padding(
          padding: EdgeInsets.all(20),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text("Fixed Deposit"),           
              Expanded(
                child: BarChartWidget(),
              ),
            ],
          ),
        ),
      ),
    );
  }

方案2：给BarChart指定固定高度 #

如果需要固定图表的高度，直接用SizedBox包裹BarChart指定高度即可：

Column(
  children: [
    Text("Fixed Deposit"),           
    SizedBox(
      height: 300, // 可根据需求调整高度数值
      child: BarChartWidget(),
    ),
  ],
)

方案3：用Flexible包裹BarChart #

如果不需要图表占满全部剩余空间，可以用Flexible包裹，允许图表根据自身内容适配高度不超过剩余空间：

Column(
  children: [
    Text("Fixed Deposit"),           
    Flexible(
      fit: FlexFit.loose,
      child: BarChartWidget(),
    ),
  ],
)

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