Flutter 为什么背景过滤器不是'；t正常工作时颤振

我曾尝试在颤振中实现背景过滤器，但它不起作用

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:

属性

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),
                  ),
),)...]))

child:ClipRect(
子：堆栈(
儿童：[
卡片(
页边距：仅限边集（右：20），
海拔：16，
形状：圆形矩形边框(
边界半径：边界半径。圆形（20）），
子：容器(
高度：220*_zoomAnim.value，
宽度：150，
装饰：盒子装饰(
边界半径：边界半径。圆形（20），
图像：装饰图像(
适合度：BoxFit.fit高度，
image:AssetImage（'images/tour$index.jpg'），
),
),
容器(
身高：220，
宽度：150，
孩子：背投滤波器(
子：容器(
装饰：盒子装饰(
颜色：颜色。黑色。不透明度（0.2），
边界半径：边界半径。圆形（20）），
),
过滤器：ImageFilter.blur（sigmaX:1，sigmaY:0），
),
),)...]))

只需将它们包装成一个堆栈，并设置图像后面容器的高度，如下所示：

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

    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,
                  ),
                ),
              ),
            )
    ],)

---

我尝试过你的方法，但没有给我结果，但我没有尝试堆栈方法。我编辑了我的答案，以实现stack@Axen_Rangs