为什么背景滤镜无法正常工作 [英] why Backdrop filter isn't working correctly flutter

问题描述

我试图在抖动中实现背景滤镜，但是它不起作用.

I've tried to implement backdrop filter in flutter but It doesn't work.

ClipRect(
    child:BackdropFilter(filter:ui.ImageFilter.blur(
    sigmaX: 5.0,
    sigmaY: 5.0,
      ),
     child: Container( 
     child: (Image.file(
     _image,
     height: 400,
     width: 400,
     fit: BoxFit.cover,
               )),
            ),
           ),
         )

推荐答案

只需将它们包装到堆栈中，然后设置图像后面容器的高度，如下所示:

Just wrap them into a stack and set the height for the container behind the image like this:

请注意，在下面的代码中，除了图像之外，我正在模糊整个屏幕.您可以通过设置容器的大小来更改模糊部分的大小.

Note that in the below code I'am blurring the whole screen except for the image. You can change the size of the blurred part by setting the container's size.

    Stack(
     children : [
       BackdropFilter(
              filter: ImageFilter.blur(
                sigmaX: 5.0,
                sigmaY: 5.0,
              ),
              child: Container(
                height: MediaQuery.of(context).size.height
                color: Colors.white.withOpacity(0.4),
              ),
            ),
            Container(
              height: MediaQuery.of(context).size.height,
              child: Center(
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10.0),
                  child: Image.file(
                    _image,
                    height: 400,
                    width: 400,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            )
    ],)

这篇关于为什么背景滤镜无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！