如何在应用切换器中添加自定义隐私安全屏幕？

不需要依赖第三方模糊类包，直接通过监听应用生命周期+自定义Widget就能实现随主题切换的隐私屏效果，具体步骤如下：

1. 编写自定义隐私屏Widget #

根据当前主题的明暗模式，切换黑白背景并展示Logo：

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

  @override
  Widget build(BuildContext context) {
    final isDarkTheme = Theme.of(context).brightness == Brightness.dark;
    return Container(
      color: isDarkTheme ? Colors.black : Colors.white,
      child: Center(
        child: Image.asset(
          'assets/app_logo.png', // 替换为你的Logo资源路径
          width: 140,
          height: 140,
          // 可选：根据主题切换Logo颜色（如果Logo是单色矢量图）
          color: isDarkTheme ? Colors.white : Colors.black,
        ),
      ),
    );
  }
}

2. 监听应用生命周期，控制隐私屏显示 #

通过WidgetsBindingObserver监听应用前后台状态，在应用进入后台时显示隐私屏：

class PrivacyScreenWrapper extends StatefulWidget {
  final Widget child;
  const PrivacyScreenWrapper({super.key, required this.child});

  @override
  State<PrivacyScreenWrapper> createState() => _PrivacyScreenWrapperState();
}

class _PrivacyScreenWrapperState extends State<PrivacyScreenWrapper> with WidgetsBindingObserver {
  bool _showPrivacyOverlay = false;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    super.didChangeAppLifecycleState(state);
    // 应用进入后台/ inactive状态时显示隐私屏
    setState(() {
      _showPrivacyOverlay = state == AppLifecycleState.paused || state == AppLifecycleState.inactive;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        widget.child,
        if (_showPrivacyOverlay)
          AnimatedSwitcher(
            duration: const Duration(milliseconds: 200),
            child: PrivacyScreen(key: UniqueKey()),
          ),
      ],
    );
  }
}

3. 全局集成到应用 #

将主页面包裹在PrivacyScreenWrapper中，实现全局生效：

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Privacy Screen',
      theme: ThemeData(brightness: Brightness.light),
      darkTheme: ThemeData(brightness: Brightness.dark),
      home: PrivacyScreenWrapper(
        child: const HomePage(), // 替换为你的应用主页面
      ),
    );
  }
}

注意事项 #

• 确保Logo资源已在pubspec.yaml的assets节点中注册，比如：

  assets:
    - assets/app_logo.png
  

• 该方案在iOS和Android平台均有效，系统的应用切换器会捕获隐私屏画面作为预览，完全替代原页面内容
• 若需要更平滑的过渡效果，可以调整AnimatedSwitcher的动画参数

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