求助：Flutter Stack组件实现指定绿白背景UI失败

问题根源 #

你的代码无法显示预期UI的核心原因有两个：

• 所有Container未指定宽高或约束，布局时会被压缩为0×0的尺寸，自然无法看到背景色
• Stack嵌套在Column中，Column默认仅包裹子组件，没有给Stack分配足够的显示空间

修复代码 #

根据你提供的示例图（绿色背景叠加白色圆形），以下是修复后的代码：

import 'package:flutter/material.dart';

class Test extends StatelessWidget{
  const Test({Key? key}):super(key: key);

  @override
  Widget build(BuildContext context){
    return Scaffold(
      body: SizedBox(
        // 占满整个屏幕空间
        width: double.infinity,
        height: double.infinity,
        child: Stack(
          children: [
            // 绿色背景容器，占满Stack
            Container(
              width: double.infinity,
              height: double.infinity,
              color: Colors.green,
            ),
            // 白色圆形，居中显示
            Center(
              child: Container(
                width: 200,
                height: 200,
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.white,
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

关键修改说明 #

• 用SizedBox包裹Stack，设置width和height为double.infinity，让Stack占满整个屏幕
• 给绿色背景的Container设置全屏尺寸，确保背景铺满
• 给白色圆形的Container设置固定宽高（这里设为200×200，可根据需求调整），并用Center组件让它在Stack中居中
• 简化了绿色容器的写法，直接用color属性替代BoxDecoration（效果一致，更简洁）

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