Flutter中如何在页面导航时保留背景滤镜效果？

问题原因 #

你遇到的背景逐渐变暗，是因为每次通过showDialog打开的新页面也重复使用了BackdropFilter，多层模糊滤镜叠加后，视觉上背景会越来越暗。同时默认的弹窗遮罩（barrier）自带半透明效果，会进一步加深暗度。

解决方案 #

1. 全局仅添加一次背景模糊 #

将BackdropFilter放在应用最外层（比如MaterialApp的父级），让所有页面和弹窗共享这一层模糊效果，避免重复叠加：

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
      child: MaterialApp(
        title: 'Your App',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const HomePage(),
      ),
    );
  }
}

2. 所有页面/弹窗保持背景透明 #

移除各页面内部的BackdropFilter，并将Scaffold的背景色设为透明，确保底层的全局模糊效果能透出来：

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent, // 关键：设置透明背景
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(32.0),
          child: GestureDetector(
            onTap: () {
              showDialog(
                context: context,
                builder: (ctx) => const SignUpNameEmailPassword(),
                barrierColor: Colors.transparent, // 移除默认半透明遮罩
              );
            },
            child: Container(
              // 首页内容
              child: const Text('进入注册页'),
            ),
          ),
        ),
      ),
    );
  }
}

3. 弹窗页面统一处理 #

后续的弹窗页面（如SignUpNameEmailPassword、WeSentYouAnEmail）同样保持透明背景，不再添加BackdropFilter：

class SignUpNameEmailPassword extends StatelessWidget {
  const SignUpNameEmailPassword({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          GestureDetector(
            onTap: () {
              showDialog(
                context: context,
                builder: (ctx) => const WeSentYouAnEmail(),
                barrierColor: Colors.transparent,
              );
            },
            child: Container(
              child: const Center(
                child: Icon(
                  Icons.arrow_forward,
                  size: 40,
                  color: Color(0xff7E7E7E),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

额外说明 #

如果你的页面导航使用Navigator.push而非showDialog，同样遵循上述规则：全局仅添加一次模糊，所有页面保持透明背景，即可保证切换页面时模糊效果一致，不会叠加变暗。

内容的提问来源于stack exchange，提问作者pomoworko.com