使用Flutter & Dart开发可悬浮于其他应用的屏幕截图触发按钮

环境依赖配置 #

在pubspec.yaml中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_overlay_window: ^0.4.3 # 实现全局悬浮窗
  native_screenshot: ^1.0.2 # 调用系统原生截图能力
  permission_handler: ^10.2.0 # 权限申请

权限配置 #

Android 端 #

在android/app/src/main/AndroidManifest.xml中添加以下权限声明：

<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.FOREGROUND_SERVICE" />

iOS 端 #

在ios/Runner/Info.plist中添加权限声明：

<key>NSPhotoLibraryAddUsageDescription</key>
<string>需要存储权限保存截图</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>需要读取权限访问截图</string>

核心代码实现 #

1. 权限申请与悬浮窗初始化 #

// 申请悬浮窗权限
Future<bool> requestOverlayPermission() async {
  bool isGranted = await FlutterOverlayWindow.isPermissionGranted();
  if (!isGranted) {
    isGranted = await FlutterOverlayWindow.requestPermission();
  }
  return isGranted;
}

// 启动悬浮按钮
Future<void> showOverlayButton() async {
  await FlutterOverlayWindow.showOverlay(
    height: 48,
    width: 48,
    alignment: OverlayAlignment.bottomRight,
    enableDrag: true, // 支持拖拽移动
    flag: OverlayFlag.defaultFlag,
    visibility: NotificationVisibility.visibilityPublic,
  );
}

2. 悬浮窗布局与点击逻辑 #

新建悬浮窗的独立入口overlay_main.dart：

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.transparent,
        body: GestureDetector(
          onTap: () async {
            // 触发截图逻辑
            String? imagePath = await NativeScreenshot.takeScreenshot();
            if (imagePath != null) {
              // 截图成功，可在这里添加保存/分享逻辑
              FlutterOverlayWindow.shareData("screenshot_success:$imagePath");
            }
          },
          child: Container(
            width: 48,
            height: 48,
            decoration: BoxDecoration(
              color: Colors.black.withOpacity(0.6),
              borderRadius: BorderRadius.circular(24),
            ),
            child: const Icon(Icons.camera_alt, color: Colors.white, size: 24),
          ),
        ),
      ),
    );
  }
}

适配注意事项 #

• 小米、华为、vivo等国产定制ROM需要额外引导用户开启「悬浮窗显示」「后台弹出界面」权限，否则悬浮窗无法正常展示
• Android 13及以上版本需要额外申请通知权限，否则悬浮窗的前台服务会被系统回收
• iOS端实现全局悬浮需要借助画中画能力，原生系统没有开放全局悬浮窗接口，可通过pip_flutter包实现类似效果

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