Question 77805 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make blur background when dialog box is open? – Flutter

enter image description here

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

Tags:

2

Answers


  1. 0

    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')
            ),
          ),
        );
     );
    Login or Signup to reply.
  2. 0

    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(),
    )
);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search