How to make blur background when dialog box is open?

Question

Here is an example, I want this type of dialog box for my initial project, anyone helps me out?

Answer 1

Try with backdropfilter with filter property. Hope you get the solution!

Get.dialog(
    BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
          child: AlertDialog(
            contentPadding: EdgeInsets.zero,
            backgroundColor: Colors.transparent,
            elevation: 10.0,
            content: Container(
              height: height,
              width: 100.0.w,
              decoration: BoxDecoration(
                color: Theme.of(context).scaffoldBackgroundColor,
                borderRadius: BorderRadius.circular(16),
              ),
              child: Text('Downloading')
            ),
          ),
        );
     );

Answer 2

By Wrapping your Dialog with BackdropFilter You can achieve your design.

return new BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
    child: Dialog(
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15.0)),
      backgroundColor: Color(ColorResources.BLACK_ALPHA_65),
      child: _dialogContent(),
    )
);