How to create a "Layer Blur" effect figma on circle shaped container in Flutter?

Question

How to replicate Figma layer blur effect on a container with a circle shaped in Flutter?

I have a design in Figma that has a layer blur effect applied on a circle. Please refer to the image below for more details.

I tried using the Blur widget from the blur package in Flutter, but it doesn't create the same effect as in Figma. Here's the code that I'm using:

  @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,
              ),
            ),
          ),
        ],
      ),
    );
  }

Here is the result of my code:

Answer 1

I all so have the same issue

// Green Elliptical Shape at Top with Blur effect
            Positioned(
              top: -56,
              left: 216,
              child: ClipOval(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 250, sigmaY: 250), // Top ellipse blur (Figma: 250)
                  child: Container(
                    width: 350,
                    height: 233,
                    decoration: BoxDecoration(
                      color: Color.fromRGBO(30, 176, 86, 1).withOpacity(0.6), // Green with transparency
                      borderRadius: BorderRadius.all(Radius.elliptical(350, 233)),
                    ),
                  ),
                ),
              ),
            ),
            
            // Brown Elliptical Shape at Bottom with Blur effect
            Positioned(
              top: 763,
              left: -255,
              child: ClipOval(
                child: BackdropFilter(
                  filter: ImageFilter.blur(sigmaX: 100, sigmaY: 100), // Bottom ellipse blur (Figma: 100)
                  child: Container(
                    width: 468,
                    height: 308,
                    decoration: BoxDecoration(
                      color: Color.fromRGBO(92, 59, 21, 1).withOpacity(0.6), // Brown with transparency
                      borderRadius: BorderRadius.all(Radius.elliptical(468, 308)),
                    ),
                  ),
                ),
              ),
            ),
            
            // Circle with Shadow (Top Ellipse Shadow)
            Positioned(
              top: -90,
              left: 150,
              child: Container(
                height: 80,
                width: 80,
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  boxShadow: [
                    BoxShadow(blurRadius: 30, spreadRadius: 2, color: Colors.green),
                  ],
                ),
              ),
            ),
            
            // Radial Gradient Circle (Bottom Ellipse Gradient Effect)
            Positioned(
              top: 735,
              left: -220,
              child: Container(
                height: 80,
                width: 80,
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  gradient: RadialGradient(
                    colors: [
                      Color.fromRGBO(92, 59, 21, 1),
                      Color.fromRGBO(92, 59, 21, 1).withOpacity(0.5),
                      Color.fromRGBO(92, 59, 21, 1).withOpacity(0.1),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

U don't need to use Blur package if u have the color *(Blur package works better as img background ). What u r trying to achieve can be done in 2 ways

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),
         ]),
      ),
    )