title: How to blur a Container or Any widget in Flutter
body: <p>I am trying to achieve a blur effect on a Container widget something like this.</p>
  
  <p><strong>Expectation:</strong>  </p>
  
  <p><a href="https://i.stack.imgur.com/eDovI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eDovI.png" alt="enter image description here"></a></p>
  
  <p>I tried to achieve it with <code>BackdropFilter</code> with <code>ImageFilter.blur</code> filter but it's not of any help.</p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>child: Container(
      child: Stack(
        children: &lt;Widget&gt;[
          BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
            child: Container(
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: color
              ),
              height: 60,
              width: 60,
            ),
          ),
          Positioned(
            left: 15,
            top: 15,
            child: Container(
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.lightBlue
              ),
              height: 30,
              width: 30,
            ),
          ),
        ]
      ),
    )
  </code></pre>
  
  <p><strong>Output:</strong>    </p>
  
  <p><a href="https://i.stack.imgur.com/cEc7G.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cEc7G.png" alt="enter image description here"></a></p>