Blur background behind dialog flutter? [closed]

Answer 1

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