Flutter — BackdropFilter

Você já se perguntou como desfocar uma imagem ou qualquer widget filho no Flutter?

1. Primeira abordagem :
   Use um widget de contêiner que permita acesso à propriedade de cor. Brinque com essa propriedade em termos de Opacity.

Container(
  height: //ESPECIFICAR A ALTURA,
  width: //ESPECIFIQUE A LARGURA,
  color: Colors.black.withOpacity(0.3),
),

2. Usar o filtro Backdrop:
De acordo com a documentação, o BackdropFilter é

Um widget que aplica um filtro ao conteúdo pintado existente e, em seguida, pinta o conteúdo secundário.

Na parte superior da captura de tela, estamos usando a imagem Flutter.
No entanto, o desfoque da imagem é tratado pelo BackdropFilter. Podemos usar esse widget da seguinte forma:

BackdropFilter(
   filter: ImageFilter.blur(sigmaX: 5, sigmaY: 5),
   child: Container(color: Colors.black.withOpacity(0)),
)

O ImageFilter.blur é responsável pelo desfoque.

Lembre-se de que o efeito de desfoque é relativamente caro, especialmente se o filtro não for local, como um desfoque.

1. Uso do PopupRoute (pode estar correto)
   Como diz a documentação: “Um PopupRoute é uma rota modal que sobrepõe um widget à rota atual“.

class _PopupItemRoute extends PopupRoute {
      _PopupItemRoute();
            
      @override
      bool get barrierDismissible => true;

      @override
      Widget buildPage(BuildContext context, Animation<double> animation,
        Animation<double> secondaryAnimation) {
        return //SEU ALVO;
    }
 }

2. Uso de overlays (recomendação pessoal)

• Instanciar um Overlay
• Criar OverlayEntry
• Inserir OverlayEntry

Como instanciar um Overlay

//Insere os widgets na entrada overlay.
OverlayEntry _overlayEntry;
//Mantém o estado de overlay.
OverlayState overlayState;

Como criar e inserir o Overlay Entry…

void _insertOverlayEntry() async {
    _overlayEntry = OverlayEntry(
      builder: (context) {
        return //SEU WIDGET;
    },
    overlayState.insert(_overlayEntry);
);

Como remover o Overlay Entry…

void _removeOverlayEntry() {
    _overlayEntry?.remove();
    _overlayEntry = null;
  }