flutter - 如何在 Flutter 应用程序处于非活动状态时对其进行模糊处理

Question

在 Flutter 应用程序不活动时模糊的最佳方法是什么？与 iOS 类似的方式是使用相机应用程序。

标签： flutter

Answer 1

我一直在寻找做同样的事情，这是我实施的解决方案。

演示图片

我使用 Overlay 小部件添加模糊效果，并使用 AppLifecycleState 来显示或不显示。看看下面的代码片段。（感谢这篇文章的背景模糊效果代码片段）

你可以在这里找到工作演示

MaterialApp(
  ...,
  builder: (BuildContext builderContext, Widget? child) => Overlay(
    initialEntries: <OverlayEntry>[
      OverlayEntry(
        builder: (BuildContext context) => AppLifecycleOverlay(),
      )
    ],
  ),
)

class AppLifecycleOverlay extends StatefulWidget {
  const AppLifecycleOverlay({Key? key}) : super(key: key);

  @override
  State<AppLifecycleOverlay> createState() => _AppLifecycleOverlayState();
}

class _AppLifecycleOverlayState extends State<AppLifecycleOverlay>
    with WidgetsBindingObserver {
  bool shouldBlur = false;

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

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

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    setState(() {
      shouldBlur = state == AppLifecycleState.inactive ||
          state == AppLifecycleState.paused;
    });
  }

  @override
  Widget build(BuildContext context) {
    if (shouldBlur) {
      return BackdropFilter(
        filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
        child: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          color: Colors.grey.shade200.withOpacity(0.5),
        ),
      );
    }

    return Container();
  }
}