Blur background behind dialog flutter? [closed]

Answer 1

try implementing this code

 Widget build(BuildContext context) {
  return Scaffold(
  body: Stack(
    fit: StackFit.expand,
    children: <Widget>[
      Image.asset('asset url', fit: BoxFit.cover),
      blur(),
    ],
        ),
      ),
    ],
  ),
);
}


 Widget blur(){
if(
  //dialog pops up or is active
){
return BackdropFilter(

filter: ImageFilter.blur(sigmaX:5.0,sigmaY:5.0),
);
}

else{
  return Image.asset('asset url', fit: BoxFit.cover);////if dialog not active returns an unfiltered image

  }
 }

Answer 2

Just wrap your Dialog inside BackdropFilter

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(),
    )
);

Widget _dialogContent() {}//Your dialog view

Answer 3

I implemented blured background with showGeneralDialog method to make blur transition as smooth as possible. Here is an example:

showGeneralDialog(
    barrierDismissible: true,
    barrierLabel: '',
    barrierColor: Colors.black38,
    transitionDuration: Duration(milliseconds: 500),
    pageBuilder: (ctx, anim1, anim2) => AlertDialog(
        title: Text('blured background'),
        content: Text('background should be blured and little bit darker '),
        elevation: 2,
        actions: [
            FlatButton(
                child: Text('OK'),
                onPressed: () {
                    Navigator.of(context).pop();
                },
              ),
            ],
   ),
   transitionBuilder: (ctx, anim1, anim2, child) => BackdropFilter(
       filter: ImageFilter.blur(sigmaX: 4 * anim1.value, sigmaY: 4 * anim1.value),
           child: FadeTransition(
               child: child,
               opacity: anim1,
           ),
       ),
   context: context,
);

Answer 4

In flutter, The dimming effect behind the dialog and bottom sheets is done using a class named 'ModalBarrier'. So what you can do is just modify the code where it dims the background.

You can easily search the file in 'IntelliJ' by using the shortcut 'Double shift'

First, you need to

import 'dart:ui' show ImageFilter;

Then in the build method change (Line: 96)

child: color == null ? null : DecoratedBox(
            decoration: BoxDecoration(
              color: color,
            ),
          ),

into

child: color == null ? null : BackdropFilter(
            filter: new ImageFilter.blur(sigmaX: 3, sigmaY: 3),
            child: Container(color: Color(0x01000000)),
          ),

You can change the value of 'sigma' as per your usecase.

Screenshot : Blurred Dialog