Blur background behind dialog flutter? [closed] - dialog

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
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.

Answer 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

Answer 2

I implemented blured background with showGeneralDialog method to make a 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 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

Answer 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
}
}