Flutter开发天气APP如何实现层叠页面 下层模糊变暗效果

这个效果不需要依赖第三方库，用Flutter框架自带的组件就能实现，根据你是用同页层叠还是路由跳转的场景，选对应方案即可：

• 方案1：同页Stack实现（适合自定义浮层、非路由跳转的覆盖场景）
  直接将页面根布局替换为Stack，第一层放置原有的天气主页内容，第二层放置遮罩+上层覆盖页面即可：
  • 轻微模糊效果用BackdropFilter实现，外层包裹ClipRect避免渲染溢出，模糊参数sigmaX/sigmaY设为5-8就能达到轻度模糊的效果，不会完全遮挡下层天气信息
  • 轻微变暗效果直接用半透明黑色Container实现，黑色透明度设为0.1-0.3即可，两种效果可以叠加使用
    核心代码示例：

import 'dart:ui';

@override
Widget build(BuildContext context) {
  return Stack(
    children: [
      // 下层：原有天气主页面
      const WeatherHomeContent(),
      // 上层：通过状态变量控制遮罩和新页面显隐
      if (isOverlayShow)
        BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
          child: Container(
            color: Colors.black.withOpacity(0.2), // 调整透明度控制变暗程度
            child: const UpperPageContent(), // 上层覆盖的页面内容
          ),
        )
    ],
  );
}

如果需要加入场/退场动画，直接给上层组件包裹AnimatedOpacity、SlideTransition等动画组件即可，和普通组件的动画实现逻辑完全一致。如果是底部弹出的覆盖层，也可以直接用系统自带的showModalBottomSheet，将backgroundColor设为透明，在内容外层包裹上述的BackdropFilter遮罩即可，不需要手写弹出动画。

• 方案2：自定义路由实现（适合路由跳转的全屏/半屏覆盖场景）
  如果你是通过路由跳转打开上层页面，不需要修改原有页面结构，直接自定义透明路由即可：
  核心是将路由的opaque参数设为false，让路由背景透明露出下层页面，再在新页面外层包裹模糊/变暗遮罩。核心代码示例：

// 跳转上层页面时调用
Navigator.push(
  context,
  PageRouteBuilder(
    opaque: false, // 必须设置，否则下层页面会被遮挡无法透出
    pageBuilder: (context, anim, secondaryAnim) {
      return BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 6, sigmaY: 6),
        child: Container(
          color: Colors.black.withOpacity(0.2),
          child: const NewRoutePage(), // 跳转的上层新页面
        ),
      );
    },
    // 可选：配置淡入过渡动画，效果更自然
    transitionsBuilder: (context, anim, secondaryAnim, child) {
      return FadeTransition(opacity: anim, child: child);
    },
  ),
);

性能提示：模糊效果会占用一定的GPU资源，如果你的天气应用本身有大量粒子、天气动画，建议将模糊参数控制在10以内，低端机上可以优先使用半透明变暗的方案，几乎无额外性能开销。

参考效果如下：

内容的提问来源于stack exchange，提问作者Jitesh khurana