title: Custom widget, blur 2 widgets with text on front
body: <p>I made my own widget with blur, bottom widget is looking correct, but top isn't. On top widget, text is behind blur, but why?
  I need same result like second widget. (Text front of blur)
  Second widget is looking correct.
  Please look screenshot at first.
  How to fix it? Thanks for any help.</p>
  <p><a href="https://i.stack.imgur.com/BNcdf.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BNcdf.jpg" alt="Screenshot" /></a></p>
  <pre><code>class MyHomePage extends StatelessWidget {
    const MyHomePage({Key? key}) : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // incorrect
            MyCard(
              imageLink:
                  'https://catherineasquithgallery.com/uploads/posts/2021-02/1612198837_120-p-fioletovii-fon-mainkraft-160.png',
              text: 'AR-scene',
            ),
            SizedBox(
              height: 70,
            ),
            //correct
            MyCard(
              imageLink:
                  'https://www.digiseller.ru/preview/1019450/p1_3193057_f7ad4eea.jpg',
              text: 'Photos',
            ),
          ],
        ),
      );
    }
  }
  
  // my custom widget
  class MyCard extends StatelessWidget {
    final imageLink;
    final text;
    const MyCard({Key? key, required this.imageLink, required this.text})
        : super(key: key);
  
    @override
    Widget build(BuildContext context) {
      return Container(
        width: 270,
        height: 320,
        child: BackdropFilter(
            filter: ImageFilter.blur(sigmaX: 4, sigmaY: 3),
            child: Center(
              child: Text(
                text,
                style: TextStyle(fontSize: 25, color: Colors.white),
                textAlign: TextAlign.center,
              ),
            )),
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(7),
            image: DecorationImage(
                fit: BoxFit.cover, image: NetworkImage(imageLink))),
      );
    }
  }
  </code></pre>