Flutter中如何实现圆形背景完全填充其所属容器？

问题背景 #

开发过程中需要实现完全填充所在容器的圆形背景色，预期效果如下：

现有代码运行后的实际效果如下：

现有问题代码 #

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          decoration:  BoxDecoration(
            color:  Color(0xffF24004),
          ),
          child: Container(
            width: 202,
            height: 196,
            margin: EdgeInsets.all(100.0),
            decoration: BoxDecoration(
              shape: BoxShape.circle, 
              color : Color(0xffF2B749),
            )
          ),
        ),
      ),
    );
  }
}

尝试过使用BoxFit.cover调整效果，未解决问题。 #

问题原因 #

现有代码存在三个核心问题：

1. 外层橙色容器未设置明确尺寸，默认会自适应子组件大小，无法留出预期的边距空间
2. 内层圆形容器设置了不等的宽高（202/196），BoxShape.circle要求承载组件宽高完全相等，否则无法绘制正圆
3. 直接给内层组件设置margin不会触发外层容器自动扩展尺寸，边距效果不符合预期

实现代码 #

带外层橙色边距的实现（匹配预期效果图） #

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        // 外层容器设置明确宽高，值为内层圆形尺寸+双侧边距
        child: Container(
          width: 402,
          height: 396,
          color: const Color(0xffF24004),
          // 用外层padding替代内层margin，控制圆形和外边缘的距离
          child: Padding(
            padding: const EdgeInsets.all(100.0),
            // 强制子组件宽高比为1，保证正圆绘制
            child: AspectRatio(
              aspectRatio: 1,
              child: Container(
                decoration: const BoxDecoration(
                  color: Color(0xffF2B749),
                  shape: BoxShape.circle,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

圆形完全填满父容器（无外边框）实现 #

如果不需要外层橙色边距，直接让圆形撑满父容器，写法更简单：

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          decoration: const BoxDecoration(
            color: Color(0xffF2B749),
            shape: BoxShape.circle,
          ),
        ),
      ),
    );
  }
}

注意：如果父容器宽高不相等，BoxShape.circle会自动以父容器短边为直径绘制正圆，长边方向保留父容器原有背景，不会拉伸圆形变形。

内容的提问来源于stack exchange，提问作者pomoworko.com