Как применить 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().