How to show a popup dialog with blur background in flutter?

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.

check the backdropfilter class https://docs.flutter.io/flutter/widgets/BackdropFilter-class.html — diegoveloper, Aug 13 '18 at 15:33
@diegoveloper can you show me the code on how to implement it on SimpleDialog class please, so that I can accept your answer — Shaheen Zahedi, Aug 13 '18 at 15:36
Possible duplicate of [How do I do the "frosted glass" effect in Flutter?](https://stackoverflow.com/questions/43550853/how-do-i-do-the-frosted-glass-effect-in-flutter) — creativecreatorormaybenot, Aug 13 '18 at 15:36
@creativecreatorormaybenot that is not about the dialog, I wanna do it on dialog! — Shaheen Zahedi, Aug 13 '18 at 15:38
@ShaheenZahedi I understodd that. You can simply apply the effect to your underlying widgets and open a dialog. Moreover, you can work with overlays. — creativecreatorormaybenot, Aug 13 '18 at 15:52
@creativecreatorormaybenot thanks for your time, but Dialog itself makes a dark background itself, so blurring all widgets, is pointless IMO, and about overlays, can you please provide an example? — Shaheen Zahedi, Aug 13 '18 at 15:55

score 85 · Accepted Answer · edited Jan 19 '20 at 18:16

85

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

edited Jan 19 '20 at 18:16

Arhaam Patvi

640
5
13

answered Jun 22 '19 at 05:20

Vikrant

1,102
8
5

This for some reason doesn't work on debug builds but works great for release builds. – Westy92 Aug 05 '21 at 22:19
@Westy92 I believe this has now been fixed (for anyone looking at this in the future). Using Flutter version 3.7.0 yields no issues. – ChaddRobertson Mar 23 '23 at 13:32

Przemek Broda · Answer 2 · 2022-02-22T17:30:49.753

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

I second that, works great! – dianikol Jun 12 '22 at 22:13 — dianikol, Jun 12 '22 at 22:13

Sahil kumar · Answer 3 · 2019-06-27T08:29:42.240

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

score 1 · Answer 4 · answered Aug 13 '18 at 20:26

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

  }
 }

How to show a popup dialog with blur background in flutter?

4 Answers4

Linked

Related