为什么背景滤镜无法正常工作？ [英] 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,
               )),
            ),
           ),
         )

推荐答案

使用堆栈并将 ImageFilter 放置在要模糊的图像上，或者可以使用 colorBlendMode：

You have to use a stack and place the ImageFilter on top of the image you want to blur or you can use the colorBlendMode: property instead.

Container(
                              child: (Image.file(
                                _file,
                                height: 400,
                                colorBlendMode: BlendMode.overlay,
                                color: Colors.grey.withOpacity(0.5),
                                width: 400,
                                fit: BoxFit.cover,
                              )),
                            ),
                          ),

带堆栈-

          child: ClipRect(
            child: Stack(
              children: <Widget>[
                Card(
                  margin: EdgeInsets.only(right: 20),
                  elevation: 16,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20)),
                  child: Container(
                    height: 220 * _zoomAnim.value,
                    width: 150,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(20),
                        image: DecorationImage(
                            fit: BoxFit.fitHeight,
                            image: AssetImage('images/tour$index.jpg'))),
                  ),
                ),
                Container(
                  height: 220,
                  width: 150,
                  child: BackdropFilter(
                    child: Container(
                      decoration: BoxDecoration(
                          color: Colors.black.withOpacity(0.2),
                          borderRadius: BorderRadius.circular(20)),
                    ),
                    filter: ImageFilter.blur(sigmaX: 1, sigmaY: 0),
                  ),
),)...]))

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