如何应用BackdropFilter会模糊整个背景（中间除外）？

Question

我正在尝试在除中心方框以外的所有背景空间中应用模糊效果。我该怎么办？

child: Stack(
          children: <Widget>[
            Positioned.fill(
              child: QRView(
                key: qrKey,
                onQRViewCreated: _onQRViewCreated,
                overlay: QrScannerOverlayShapeTeste(
                  overlayColor: Colors.transparent.withOpacity(0.85),
                  borderColor: Colors.white,
                  borderRadius: 8,
                  borderLength: 30,
                  borderWidth: 2,
                  cutOutSize: 200,
                  borderRadiusBackground: BorderRadius.only(
                    topLeft: const Radius.circular(12),
                    topRight: const Radius.circular(12),
                  ),
                ),
              ),
            ),
            Positioned.fill(
              child: BackdropFilter(
                filter: ui.ImageFilter.blur(
                  sigmaX: 5.0,
                  sigmaY: 5.0,
                ), //this is dependent on the import statment above
                child: Container(
                    decoration: BoxDecoration(
                  color: Colors.black.withOpacity(0.8),
                )
                    ),
              ),
            ),
])

在上图中，模糊效果在我的整个背景中。中心方块不应该具有模糊效果：（

有人可以帮助我吗？我会非常感谢你。

Answer 1

Stack的子代倒退。 QRView应该在子代列表中的BackdropFilter下方。

但是，更简单的方法是使QRView完全成为BackdropFilter的子级。如果这导致过滤器无法占用整个可用空间，则可以始终插入中介SizedBox.exand()。