如何在 Flutter 中的圆形容器上创建“图层模糊”效果 figma？

Question

如何在 Flutter 的圆形容器上复制 Figma 层模糊效果？

我在 Figma 中有一个设计，在圆上应用了图层模糊效果。请参阅下图了解更多详情。

我尝试在 Flutter 中使用 blur 包中的模糊小部件，但它并没有产生与 Figma 中相同的效果。这是我正在使用的代码：

  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    return Scaffold(
      body: Stack(
        children: [
          Blur(
            blur: 10,
            borderRadius: BorderRadius.circular(180),
            blurColor: Color.fromARGB(255, 10, 14, 81),
            child: Container(
              width: 302,
              height: 302,
              decoration: const BoxDecoration(
                shape: BoxShape.circle,
              ),
            ),
          ),
        ],
      ),
    );
  }

这是我的代码的结果：

Answer 1

如果你有颜色*，你不需要使用模糊包（模糊包作为 img 背景效果更好）。你想要实现的目标可以通过两种方式完成

1: Container(
      height:80,
      width:80,
      decoration: const BoxDecoration(
        shape:BoxShape.circle,
        boxShadow:  [
          BoxShadow(blurRadius: 30, spreadRadius: 2, color: Colors.red)
        ],
      ),
    )
2. Container(
      height:80,
      width:80,
      decoration: const BoxDecoration(
        shape:BoxShape.circle,
        gradient: const RadialGradient(colors: [
             Colors.red,
             Colors.red.withOpacity(.5),
             Colors.red.withOpacity(.1),
         ]),
      ),
    )