Flutter嵌套Card布局：如何调整内层红色Card尺寸匹配示例效果

问题说明 #

想要实现嵌套Card布局，但内层红色Card尺寸无法匹配预期样式，当前代码实现效果不符。

问题代码 #

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18.0),
  ),
  shadowColor: Colors.white,
  color: HexColor('#FFFBFB').withOpacity(0.5),
  child: SizedBox(
    height: height * 0.35,
    width: width * 0.94,
    child: Padding(
      padding: const EdgeInsets.only(
          top: 0, bottom: 0, right: 0, left: 0),
      child: Column(
        children: <Widget>[
          Card(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(2.0),
              ),
              shadowColor: Colors.red,
              color: HexColor('##D70040').withOpacity(0.9),
              child: SizedBox(
                height: height * 0.05,
                width: (MediaQuery.of(context).size.width),
              )),
          Expanded(
            child: SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Padding(
                padding: const EdgeInsets.only(
                    top: 5, right: 10, left: 10),
                child: Column(
                  children: <Widget>[],
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ),
),

修复方案 #

核心问题分析 #

1. 内层红色Card的width硬编码为屏幕宽度，会超出外层Card的限定宽度，且Card自带默认margin，导致布局溢出。
2. 外层SizedBox内的Padding设置为0无实际作用，属于冗余代码。
3. 内层Card的颜色值多了一个#，会导致颜色解析异常。

具体修改步骤 #

• 适配内层Card宽度：将内层红色Card的width改为double.infinity，使其自动填充父容器宽度，避免超出外层Card范围。
• 移除冗余Padding：删除外层SizedBox内的Padding组件，让Column直接作为SizedBox的子组件。
• 修复颜色值：把HexColor('##D70040')改为HexColor('#D70040')，去掉多余的#号。
• 消除默认间距：给内层Card添加margin: EdgeInsets.zero，去除Card自带的默认margin，让边缘与外层Card贴合。

修复后代码 #

Card(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(18.0),
  ),
  shadowColor: Colors.white,
  color: HexColor('#FFFBFB').withOpacity(0.5),
  child: SizedBox(
    height: height * 0.35,
    width: width * 0.94,
    child: Column(
      children: <Widget>[
        Card(
          margin: EdgeInsets.zero,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(2.0),
          ),
          shadowColor: Colors.red,
          color: HexColor('#D70040').withOpacity(0.9),
          child: SizedBox(
            height: height * 0.05,
            width: double.infinity,
          ),
        ),
        Expanded(
          child: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Padding(
              padding: const EdgeInsets.only(top: 5, right: 10, left: 10),
              child: Column(
                children: <Widget>[],
              ),
            ),
          ),
        ),
      ],
    ),
  ),
),

替代建议（若仍有适配问题） #

如果嵌套Card的默认样式（阴影、margin）持续干扰布局，可改用Container模拟内层红色区域：

// 替换内层Card为Container
Container(
  height: height * 0.05,
  width: double.infinity,
  decoration: BoxDecoration(
    color: HexColor('#D70040').withOpacity(0.9),
    borderRadius: BorderRadius.circular(2.0),
    boxShadow: [BoxShadow(color: Colors.red, blurRadius: 2)],
  ),
)

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