Flutter实现应用非活跃时Scaffold页面全局模糊

核心思路 #

通过监听应用生命周期状态，在应用进入非活跃状态时，给Scaffold内容叠加一层模糊滤镜和半透明遮罩，模拟WhatsApp的隐私保护效果。

完整实现代码 #

import 'dart:ui';
import 'package:flutter/material.dart';

class BlurOnInactiveScreen extends StatefulWidget {
  const BlurOnInactiveScreen({super.key});

  @override
  State<BlurOnInactiveScreen> createState() => _BlurOnInactiveScreenState();
}

class _BlurOnInactiveScreenState extends State<BlurOnInactiveScreen> {
  bool _isAppInactive = false;

  @override
  void initState() {
    super.initState();
    // 监听应用生命周期状态变化
    AppLifecycleListener(
      onResume: () => setState(() => _isAppInactive = false),
      onInactive: () => setState(() => _isAppInactive = true),
      onPause: () => setState(() => _isAppInactive = true),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 原页面内容
          Center(
            child: MyWidget(),
          ),
          // 非活跃状态下的模糊遮罩
          if (_isAppInactive)
            BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 10, sigmaY: 10),
              child: Container(
                color: Colors.black.withOpacity(0.3),
                width: double.infinity,
                height: double.infinity,
              ),
            ),
        ],
      ),
    );
  }
}

// 示例自定义Widget，替换为你的实际内容
class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text(
      "应用活跃状态下的内容",
      style: TextStyle(fontSize: 24),
    );
  }
}

关键部分说明 #

• 生命周期监听：使用AppLifecycleListener监听onResume（应用恢复活跃）、onInactive（应用进入非活跃，比如切换到多任务界面）、onPause（应用暂停）状态，更新_isAppInactive标记。
• 模糊效果实现：通过BackdropFilter配合ImageFilter.blur实现高斯模糊，sigmaX和sigmaY控制模糊强度（数值越大越模糊）。
• 遮罩层：叠加半透明黑色容器，增强模糊后的隐私保护效果，同时避免模糊后的内容过于刺眼。

注意事项 #

• 不同平台的生命周期状态触发时机略有差异，AppLifecycleListener已经做了跨平台兼容，无需额外处理。
• 可根据需求调整模糊强度（sigma值）和遮罩透明度，匹配产品视觉风格。

内容的提问来源于stack exchange，提问作者Cenk YAGMUR