我怎样才能做外圈答案

【问题标题】：How can I make the outer circles我怎样才能做外圈
【发布时间】：2022-08-19 17:36:06
【问题描述】：

我正在尝试为我的应用程序制作显示功能，但我很难制作这些外圈，感谢任何输入

【解决方案1】：

有一种使用坐标绘制的方法。
您可以使用MediaQuery.of(context).size 设置比率。

return Scaffold(
      body: SafeArea(
        child: Stack(
          children: <Widget>[
            Positioned(
              top: 200,
              left: 80,
              child: Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(128.0),
                  border: Border.all(color: Colors.blue),
                ),
              ),
            ),

            Positioned(
              top: 225,
              left: 105,
              child: Container(
                width: 150,
                height: 150,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(128.0),
                  border: Border.all(color: Colors.blue),
                ),
              ),
            ),
          ],
        ),
      ),
    );

【讨论】：

【解决方案2】：

利用堆小部件并将 2 个不同大小的圆形容器作为子小部件放入堆栈小部件中

【讨论】：

【解决方案3】：

用这个：

Container(
          color: Colors.white,
          child: Center(
            child: Container(
              width: 200,
              height: 200,
              decoration: BoxDecoration(
                gradient: const LinearGradient(
                  colors: [Colors.white, Colors.red, Colors.white],
                  transform: GradientRotation(pi / 2),
                ),
                borderRadius: BorderRadius.circular(128.0),
              ),
              child: Center(
                child: Container(
                  width: 198,
                  height: 198,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(120.0),
                  ),
                ),
              ),
            ),
          ),
        ),

它导致此输出：

【讨论】：