如何为Flutter全局应用实现Windows背景模糊效果？

方案1：调用Windows DWM原生API实现Mica/Acrylic模糊（Windows 10 1809+/Windows 11） #

这种方式直接利用Windows系统的桌面窗口管理器（DWM）API，让Flutter窗口使用系统原生模糊效果，是最贴合系统体验的方案，性能和视觉表现最优。

实现步骤： #

1. 配置Windows窗口透明
   打开windows/runner/main.cpp，在窗口初始化完成后添加以下代码：

   #include <dwmapi.h> // 顶部引入DWM头文件
   
   // ... 原有代码 ...
   
   HWND hwnd = window->getHWND();
   // 设置窗口为分层透明样式
   SetWindowLongPtr(hwnd, GWL_EXSTYLE, GetWindowLongPtr(hwnd, GWL_EXSTYLE) | WS_EX_LAYERED);
   // 设置全透明，让系统模糊效果透出来
   SetLayeredWindowAttributes(hwnd, 0, 255, LWA_ALPHA);
   
   // 启用Mica模糊（Windows 11原生效果），也可替换为DWMSBT_ACRYLIC实现亚克力通透模糊
   DWORD dwmAttribute = DWMSBT_MICA;
   DwmSetWindowAttribute(hwnd, DWMWA_SYSTEMBACKDROP_TYPE, &dwmAttribute, sizeof(dwmAttribute));
   

   接着在windows/runner/CMakeLists.txt中添加DWM库链接：

   target_link_libraries(runner PRIVATE dwmapi.lib)
   

2. Flutter层无需额外处理
   此时Flutter窗口已完全透明，Windows系统会自动为窗口添加原生模糊效果，透过窗口看到的系统背景会呈现标准的毛玻璃/亚克力模糊。

方案2：捕获屏幕背景并在Flutter层模糊（兼容旧版Windows） #

如果需要支持Windows 10早期版本或更旧系统，可通过捕获窗口背后的屏幕内容，在Flutter层绘制模糊后的图像。

实现步骤： #

1. 添加win32依赖
   在pubspec.yaml中加入：

   dependencies:
     win32: ^5.0.0
   

2. 捕获窗口背后的屏幕区域
   通过win32的BitBlt等API获取窗口所在位置的屏幕截图，将其转为Flutter可识别的Image对象（需处理图像格式转换，比如从HBITMAP转成Uint8List）。

3. Flutter层叠加模糊背景
   将捕获到的屏幕图像作为底层背景，叠加BackdropFilter实现模糊，同时保留应用内容的交互性：

   import 'package:flutter/material.dart';
   import 'package:win32/win32.dart';
   
   class BlurBackgroundWrapper extends StatefulWidget {
     final Widget child;
     const BlurBackgroundWrapper({super.key, required this.child});
   
     @override
     State<BlurBackgroundWrapper> createState() => _BlurBackgroundWrapperState();
   }
   
   class _BlurBackgroundWrapperState extends State<BlurBackgroundWrapper> {
     Image? _capturedBackground;
   
     @override
     void initState() {
       super.initState();
       _captureScreenBackground();
       // 窗口移动时重新捕获背景，可通过window_manager监听窗口位置变化
     }
   
     Future<void> _captureScreenBackground() async {
       // 调用win32 API捕获窗口对应的屏幕区域，转为Flutter Image
       // 此处省略具体的HBITMAP转Image逻辑，可参考win32插件文档实现
       setState(() {
         // _capturedBackground = Image.memory(...);
       });
     }
   
     @override
     Widget build(BuildContext context) {
       return Stack(
         children: [
           if (_capturedBackground != null)
             Positioned.fill(
               child: _capturedBackground!,
             ),
           BackdropFilter(
             filter: ImageFilter.blur(sigmaX: 12, sigmaY: 12),
             child: Container(color: Colors.black.withOpacity(0.05)),
           ),
           widget.child,
         ],
       );
     }
   }
   

关键注意事项 #

• 方案1的Mica/Acrylic效果仅支持Windows 10 1809及以上版本，Mica是Windows 11的原生视觉风格，适配性更好。
• 方案2需要处理窗口移动、背景变化时的实时重捕获，性能消耗高于方案1，仅建议用于旧系统兼容场景。
• 两种方案都必须确保Flutter窗口已正确设置透明属性，否则模糊效果无法透过窗口显示系统背景。

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