自定义小部件，模糊 2 个前面带有文本的小部件

Question

我用模糊制作了自己的小部件，底部小部件看起来正确，但顶部不正确。在顶部小部件上，文本模糊不清，但为什么呢？我需要与第二个小部件相同的结果。（模糊的文字前面）第二个小部件看起来正确。请先看截图。如何解决？感谢您的帮助。

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

Answer 1

用ClipRect包裹你的BackdropFilter，否则它会覆盖整个屏幕。

  return Container(
      key: ValueKey(text),
      width: 270,
      height: 320,
      child: ClipRect( //<- here
        child: BackdropFilter(

更多关于BackdropFilter-class

Answer 2

使用背景滤镜会将特定滤镜应用于整个屏幕。您可以使用 ClipRRect 使其采用子部件的大小（在本例中为容器）。

// 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 ClipRRect(
      child: 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))),
      ),
    );
  }
}

Answer 3

更好的解决方案是使用 ImageFiltered 而不是 BackdropFilter 小部件。

ImageFiltered 模糊其 child，例如单张图片。

BackdropFilter 模糊了它“背后”的一切，但不模糊它自己的 child。它在 pop-up 对话框这样的情况下非常有用，您想要模糊整个屏幕，对话框本身除外。

自定义小部件，模糊 2 个前面带有文本的小部件

Custom widget, blur 2 widgets with text on front

flutter

flutter-layout