如何在 Flutter 中的导航中保留背景过滤器？

Question

我正在开发一个多页面 Flutter Web 应用程序，我打算在所有页面上保持一致的视觉主题。具体来说，我的目标是保留应用于第一页背景的背景滤镜效果（模糊效果），即使用户导航到后续页面也是如此。但是，我遇到了一个问题，即每次导航背景都会逐渐变暗。

为了让您更好地了解，以下是三个网页的场景：

网页#1：

这是我应用

BackdropFilter

和

ImageFilter.blur(sigmaX: 2, sigmaY: 2)

来实现模糊效果的初始页面。背景是透明的，并且可以通过触发对话框的

GestureDetector

小部件启用到其他页面的导航。

网页#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());
                                          },

网页 #2 和 #3：

此处应用了类似的导航逻辑，GestureDetector 小部件会导致新的对话框/页面。不幸的是，从第一页导航后，背景模糊效果得以保留，但背景随着每次转换而变得更暗，这不是预期的行为。

网页#2：

网页代码#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),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),

网页#3：

网页 #2 和 #3 的代码片段： 遵循类似的模式，主要区别在于

GestureDetector

小部件内的内容。

我很困惑如何在用户使用应用程序时保持初始模糊效果而不加深背景颜色。我的目标是确保 Web Page #1 的背景视觉效果在所有导航中保持一致。

对此问题的任何见解或解决方案将不胜感激！

预先感谢您的帮助。

Answer 1

只需将带有属性 showDialog

 的第二个、第三个等等 

barrierColor 调用设置为

Colors.transparent

。如下所示：

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

Answer 2

问题是每个对话框都堆积起来。在调用新的 showDialog 之前，请执行以下操作

Navigator.pop(context);

因此，您删除了之前的弹出窗口并添加了新的弹出窗口。

请注意，仅当显示对话框时才应调用 navigator.pop，否则它将弹出主屏幕

Answer 3

似乎你推动了每个页面，导致背景变暗。

您可以尝试像这样在页面之间导航。

Route route = MaterialPageRoute(builder: (context) => NextPage());
Navigator.pushReplacement(context, route);

这将推送并替换堆栈的最后一页。