Blur background behind dialog flutter? [closed]

问题

I want to achieve blur background behind dialog on SimpleDialog class. What I'm looking for is something similar to this, but for flutter.

Github Android project

EDIT: I already checked this question, but this is about the Dialog, I want to implement it on SimpleDialog.

回答1:

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

回答2:

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

回答3:

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

回答4:

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

  }
 }

来源：https://stackoverflow.com/questions/51825779/blur-background-behind-dialog-flutter

标签

dialog

Flutter