How to Preserve Background Filter Across Navigations in Flutter?

Question

I'm working on a multi-page Flutter web app where I intend to maintain a consistent visual theme across all pages. Specifically, I aim to preserve a backdrop filter effect (a blur effect) applied to the background of the first page, even as the user navigates to subsequent pages. However, I've encountered an issue where the background becomes progressively darker with each navigation.

To give you a better idea, here are the scenarios across three web pages:

Web page #1:

This is the initial page where I've applied a BackdropFilter with ImageFilter.blur(sigmaX: 2, sigmaY: 2) to achieve a blur effect. The background is transparent, and navigation to other pages is enabled through a GestureDetector widget triggering a dialog.

Code for Web Page #1:

return BackdropFilter(
  filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
  child: Scaffold(
    backgroundColor: Colors.transparent,
    body: Center(
      child: Padding(
        padding: const EdgeInsets.all(32.0),
        child: Container(...
       GestureDetector(
 onTap: () {                                     
showDialog(   context: 
context, builder: 
(ctx) => 
SignUpNameEmailPassword()
);  
},

Web Page #2 and #3:

Similar navigation logic is applied here, with GestureDetector widgets leading to new dialogs/pages. Unfortunately, after navigating from the first page, the background blur effect is maintained, but the backdrop becomes darker with each transition, which is not the intended behaviour.

Web page #2:

Code for Web Page #2

 Column(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
             GestureDetector(
               onTap: () {
                showDialog(
                context: context,
               builder: (ctx) => WeSentYouAnEmail()); },
                  child: Container(
                     child: Center(
                         child: Icon(                                     Icons.arrow_forward,
                    size: 40,
                    color: Color(0xff7E7E7E),
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),

Web page #3:

Code snippets for Web Page #2 and #3: Follow a similar pattern, primarily differing in the content within GestureDetector widgets.

I'm puzzled about how to maintain the initial blur effect without deepening the background color as the user progresses through the app. My goal is to ensure that the backdrop's visual effect from Web Page #1 remains consistent across all navigations.

Any insights or solutions to this problem would be greatly appreciated!

Thank you in advance for your help.

Answer 1

Just set the second, third and so on showDialog calls with property barrierColor to Colors.transparent. Something like below:

showDialog(
    context: context,
    barrierColor: Colors.transparent,
    builder: (ctx) => SignUpNameEmailPassword());