title: Why does Backdrop filter blur my entire app
body: <p>I am trying to achieve a very similar effect to what was shown in the widget of the week video on flutter's channel: <a href="https://www.youtube.com/watch?v=dYRs7Q1vfYI#t=1m20s" rel="noreferrer">https://www.youtube.com/watch?v=dYRs7Q1vfYI#t=1m20s</a> </p>
  
  <p>On the right you see the desired result, on the left you see what's currently going on in my app.
  <a href="https://i.stack.imgur.com/UkZqR.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UkZqR.png" alt="On the right my app, on the left the wanted result"></a></p>
  
  <p>The code I've been using is pretty similar to the one from the example video, using a Stack to position the Backdrop filter over my image. The rounded image and the blur over it are inside one widget, which will is placed inside another stack (along with the text at the bottom). Since I applied the filter only a small section of the image, I don't understand why entire app is blurred. Here's the code for the Image Widget:</p>
  
  <pre><code>Widget build(BuildContext context) {
      var size = MediaQuery.of(context).size.width - 75;
      return Container(
        height: size,
        width: size,
        child: Stack(
          alignment: Alignment.center,
          children: &lt;Widget&gt;[
            Image(imageUri: "...", size: size - 30), // this is just a container with the image
            Positioned(
              top: 100,
              left: 100,
              bottom: 100,
              right: 100,
              child: BackdropFilter(
                filter: ImageFilter.blur(
                  sigmaX: 5,
                  sigmaY: 5,
                ),
                child: Container(
                  color: Color(0x66FF0000),
                ),
              ),
            )
          ],
        ),
      );
    }
  }
  </code></pre>