Flutter浮动窗口插件flutter_floatwing使用教程

Flutter浮动窗口插件flutter_floatwing使用教程

flutter_floatwing A Flutter plugin that makes it easier to make floating/overlay window for Android with pure Flutter. 一个可以用纯粹的Flutter来开发Android浮动窗口的插件。

1. 项目介绍

flutter_floatwing 是一个用于在Android平台上创建浮动窗口的Flutter插件。它允许开发者使用纯Flutter代码来实现浮动窗口功能，无需编写任何原生代码。该插件具有以下特点：

• 纯Flutter实现：完全使用Flutter编写，无需编写原生代码。
• 简单易用：只需一行代码即可启动浮动窗口。
• 自动调整大小：窗口大小会根据Flutter Widget的大小自动调整。
• 多窗口支持：支持在一个应用中创建多个浮动窗口，并且窗口之间可以有父子关系。
• 通信机制：主应用可以与浮动窗口进行通信，窗口之间也可以相互通信。
• 事件机制：支持窗口生命周期事件和其他操作事件（如拖动），使窗口控制更加灵活。

2. 项目快速启动

2.1 安装插件

在项目的pubspec.yaml文件中添加flutter_floatwing依赖：

dependencies:
  flutter_floatwing: <latest_version>

然后运行以下命令安装插件：

flutter pub get

2.2 配置Android权限

在AndroidManifest.xml文件中添加以下权限：

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

2.3 创建浮动窗口

首先，在MaterialApp中添加一个路由，用于显示浮动窗口的Widget：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    initialRoute: "/",
    routes: {
      "/": (_) => HomePage(),
      "/my-overlay-window": (_) => MyOverlayWindow(), // 添加浮动窗口的路由
    },
  );
}

然后，在需要启动浮动窗口的地方检查并请求权限，并初始化插件：

// 检查并请求系统浮动窗口权限
FloatwingPlugin().checkPermission().then((v) {
  if (!v) {
    FloatwingPlugin().openPermissionSetting();
  }
});

// 初始化插件
FloatwingPlugin().initialize();

最后，创建并启动浮动窗口：

// 定义窗口配置并启动窗口
WindowConfig(route: "/my-overlay-window").to().create(start: true);

3. 应用案例和最佳实践

3.1 辅助触摸模拟

一个常见的应用场景是模拟Android设备的辅助触摸功能。通过flutter_floatwing，可以轻松实现一个浮动的小圆点，用户可以通过拖动这个小圆点来执行一些快捷操作。

void _startAssistiveTouch() {
  WindowConfig(route: "/assistive-touch").to().create(start: true);
}

3.2 多窗口管理

在某些应用中，可能需要同时管理多个浮动窗口。例如，一个窗口用于显示实时数据，另一个窗口用于显示控制面板。通过flutter_floatwing，可以轻松实现多窗口的管理和通信。

void _startMultiWindows() {
  WindowConfig(route: "/data-window").to().create(start: true);
  WindowConfig(route: "/control-panel").to().create(start: true);
}

4. 典型生态项目

4.1 Flutter Desktop

flutter_floatwing 可以与Flutter Desktop项目结合使用，实现桌面应用中的浮动窗口功能。例如，可以在桌面应用中创建一个浮动的小工具窗口，用于显示实时通知或快捷操作。

4.2 Flutter Web

虽然flutter_floatwing主要针对Android平台，但通过一些适配工作，也可以在Flutter Web项目中实现类似的浮动窗口功能。例如，可以在Web应用中创建一个浮动的聊天窗口，用户可以随时打开和关闭。

通过以上步骤，您可以轻松地在Flutter项目中集成flutter_floatwing插件，实现各种浮动窗口功能。希望本教程对您有所帮助！

flutter_floatwing A Flutter plugin that makes it easier to make floating/overlay window for Android with pure Flutter. 一个可以用纯粹的Flutter来开发Android浮动窗口的插件。