Flutter如何实现桌面悬浮插件

在Flutter中如何实现类似桌面悬浮窗的插件？需要这个插件能够始终显示在其他应用上方，并且可以自由拖动位置。目前尝试过使用Overlay和PlatformView，但效果不太理想，悬浮窗会在切换应用时消失。请问有没有成熟的解决方案或推荐的第三方库？最好能支持iOS和Android双平台。

2 回复

Flutter实现桌面悬浮插件可通过SystemWindow或overlay库。在Android上需申请悬浮窗权限，使用WindowManager添加视图；iOS限制较多，通常需结合原生代码实现。核心步骤：创建悬浮视图、处理触摸事件、动态更新位置。

更多关于Flutter如何实现桌面悬浮插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现桌面悬浮插件（类似悬浮球、悬浮窗口），可以通过以下步骤实现：

1. 使用 overlay 实现应用内悬浮

适用于应用内部的悬浮控件：

OverlayEntry? _overlayEntry;

void _createFloatingWidget() {
  _overlayEntry = OverlayEntry(
    builder: (context) => Positioned(
      top: 100,
      left: 50,
      child: Material(
        child: Container(
          width: 60,
          height: 60,
          decoration: BoxDecoration(
            color: Colors.blue,
            shape: BoxShape.circle,
          ),
          child: Icon(Icons.add),
        ),
      ),
    ),
  );
  Overlay.of(context).insert(_overlayEntry!);
}

// 移除悬浮控件
void _removeFloatingWidget() {
  _overlayEntry?.remove();
  _overlayEntry = null;
}

2. 使用 SystemWindow 实现系统级悬浮（需要插件）

需要借助第三方插件实现跨应用悬浮显示：

添加依赖：

dependencies:
  system_alert_window: ^0.2.0+2

基本用法：

import 'package:system_alert_window/system_alert_window.dart';

// 请求悬浮窗权限
SystemAlertWindow.requestPermissions();

// 创建悬浮窗
SystemAlertWindow.registerOnClickListener(callback);
SystemAlertWindow.showSystemWindow(
  height: 60,
  width: 60,
  gravity: SystemWindowGravity.TOP_END,
  header: SystemWindowHeader(
    title: SystemWindowText(text: "悬浮窗"),
  ),
  body: SystemWindowBody(
    rows: [
      EachRow(
        columns: [
          EachColumn(
            text: SystemWindowText(text: "点击"),
          ),
        ],
      ),
    ],
  ),
);

3. 注意事项

  1. 权限配置：

    • Android：需要在 AndroidManifest.xml 添加 SYSTEM_ALERT_WINDOW 权限
    • iOS：限制较多，通常只能实现应用内悬浮

  2. 移动交互： 可以通过 Draggable 组件实现拖动效果：

    Draggable(
  child: FloatingActionButton(onPressed: () {}),
  feedback: FloatingActionButton(onPressed: () {}),
  childWhenDragging: Container(),
)

  3. 推荐插件：

    • system_alert_window：系统级悬浮窗
    • flutter_overlay_window：轻量级悬浮方案
    • floaty_head：仿悬浮球实现

4. 平台差异

  • Android：支持较好，可以实现在其他应用上方显示
  • iOS：限制严格，通常只能在应用内使用Overlay实现

建议根据具体需求选择实现方案，应用内悬浮使用Overlay，系统级悬浮需要配合原生代码实现。

回到顶部