Flutter浮动窗口管理插件flutter_floatwing的使用

Flutter浮动窗口管理插件flutter_floatwing的使用

1. 插件简介

flutter_floatwing 是一个用于在 Android 上创建和管理浮动窗口（overlay windows）的 Flutter 插件。它允许你使用纯 Flutter 代码来构建浮动窗口，并提供了多种功能，如自动调整大小、多窗口支持、事件机制等。

2. 主要特性

• 纯 Flutter：你可以用纯 Flutter 代码编写整个浮动窗口。
• 简单易用：只需一行代码即可启动浮动窗口。
• 自动调整大小：根据 Flutter 小部件的大小自动调整 Android 视图。
• 多窗口支持：可以在一个应用中创建多个浮动窗口，并且窗口可以有子窗口。
• 通信能力：主应用和窗口之间可以进行通信，窗口之间也可以互相通信。
• 事件机制：可以监听窗口生命周期和其他操作（如拖动）的事件，灵活控制窗口行为。

3. 预览

夜间模式	简单示例	辅助触摸模拟

4. 安装

1. 打开 pubspec.yaml 文件，在 dependencies 中添加 flutter_floatwing：

   dependencies:
     flutter_floatwing: ^最新版本
   

2. 安装依赖：

   • 终端：运行 flutter pub get
   • Android Studio/IntelliJ：点击 pubspec.yaml 顶部的 “Packages get”
   • VS Code：点击 pubspec.yaml 顶部的 “Get Packages”

或者直接在命令行中添加：

flutter pub add flutter_floatwing

5. 快速开始

5.1 添加权限

由于 flutter_floatwing 使用的是 Android 的系统警报窗口（SYSTEM_ALERT_WINDOW），因此需要在 AndroidManifest.xml 中添加权限：

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

5.2 创建路由

在主应用中为浮动窗口添加路由：

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

5.3 检查并请求权限

在启动浮动窗口之前，需要检查并请求系统警报窗口权限，并初始化 flutter_floatwing 插件：

// 检查并请求权限
FloatwingPlugin().checkPermission().then((v) {
  if (!v) FloatwingPlugin().openPermissionSetting();
});

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

5.4 创建并启动浮动窗口

定义窗口配置并启动浮动窗口：

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

6. 完整示例 Demo

以下是一个完整的示例，展示了如何使用 flutter_floatwing 创建和管理浮动窗口。

import 'package:flutter/material.dart';
import 'package:flutter_floatwing/flutter_floatwing.dart';

void main() {
  runApp(MyApp());
}

[@pragma](/user/pragma)("vm:entry-point")
void floatwing() {
  runApp(((_) => NonrmalView()).floatwing().make());
}

void floatwing2(Window w) {
  runApp(MaterialApp(
    // floatwing on widget can't use Window.of(context)
    // to access window instance
    // should use FloatwingPlugin().currentWindow
    home: NonrmalView().floatwing(),
  ));
}

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var _configs = [
    WindowConfig(
      id: "normal",
      route: "/normal",
      draggable: true,
    ),
    WindowConfig(
      id: "assitive_touch",
      route: "/assitive_touch",
      draggable: true,
    ),
    WindowConfig(
      id: "night",
      route: "/night",
      width: WindowSize.MatchParent, 
      height: WindowSize.MatchParent,
      clickable: false,
    )
  ];

  Map<String, WidgetBuilder> _builders = {
    "normal": (_) => NonrmalView(),
    "assitive_touch": (_) => AssistiveTouch(),
    "night": (_) => NightView(),
  };

  Map<String, Widget Function(BuildContext)> _routes = {};

  [@override](/user/override)
  void initState() {
    super.initState();

    _routes["/"] = (_) => HomePage(configs: _configs);

    _configs.forEach((c) => {
          if (c.route != null && _builders[c.id] != null)
            {_routes[c.route!] = _builders[c.id]!.floatwing(debug: false)}
        });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: "/",
      routes: _routes,
    );
  }
}

class HomePage extends StatefulWidget {
  final List<WindowConfig> configs;
  const HomePage({Key? key, required this.configs}) : super(key: key);

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  void initState() {
    super.initState();

    FloatwingPlugin().initialize();

    initAsyncState();
  }

  List<Window> _windows = [];
  Map<Window, bool> _readys = {};
  bool _ready = false;

  initAsyncState() async {
    var p1 = await FloatwingPlugin().checkPermission();
    var p2 = await FloatwingPlugin().isServiceRunning();

    // 获取权限
    if (!p1) {
      FloatwingPlugin().openPermissionSetting();
      return;
    }

    // 启动服务
    if (!p2) {
      FloatwingPlugin().startService();
    }

    _createWindows();

    setState(() {
      _ready = true;
    });
  }

  _createWindows() async {
    await FloatwingPlugin().isServiceRunning().then((v) async {
      if (!v)
        await FloatwingPlugin().startService().then((_) {
          print("启动后台服务成功");
        });
    });

    _windows.forEach((w) {
      var _w = FloatwingPlugin().windows[w.id];
      if (_w != null) {
        // 替换 w 为 _w
        _readys[w] = true;
        return;
      }
      w.on(EventType.WindowCreated, (window, data) {
        _readys[window] = true;
        setState(() {});
      }).create();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Floatwing 示例'),
      ),
      body: _ready
          ? ListView(
              children: _windows.map((e) => _item(e)).toList(),
            )
          : Center(
              child: ElevatedButton(
                  onPressed: () {
                    initAsyncState();
                  },
                  child: Text("开始")),
            ),
    );
  }

  _debug(Window w) {
    Navigator.of(context).pushNamed(w.config!.route!);
  }

  Widget _item(Window w) {
    return Card(
      margin: EdgeInsets.all(10),
      child: Padding(
          padding: EdgeInsets.all(10),
          child: Column(
            children: [
              Text(w.id,
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600)),
              SizedBox(height: 10),
              Container(
                width: double.infinity,
                padding: EdgeInsets.all(5),
                decoration: BoxDecoration(
                    color: Color.fromARGB(255, 214, 213, 213),
                    borderRadius: BorderRadius.all(Radius.circular(4))),
                child: Text(w.config?.toString() ?? ""),
              ),
              SizedBox(height: 10),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  TextButton(
                    onPressed: (_readys[w] == true) ? () => w.start() : null,
                    child: Text("打开"),
                  ),
                  TextButton(
                      onPressed: w.config?.route != null ? () => _debug(w) : null,
                      child: Text("调试")),
                  TextButton(
                    onPressed: (_readys[w] == true)
                        ? () => {w.close(), w.share("close")}
                        : null,
                    child: Text("关闭", style: TextStyle(color: Colors.red)),
                  ),
                ],
              )
            ],
          )),
    );
  }
}

// 示例页面
class NonrmalView extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("普通窗口")),
      body: Center(child: Text("这是一个普通的浮动窗口")),
    );
  }
}

class AssistiveTouch extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("辅助触摸")),
      body: Center(child: Text("这是一个辅助触摸窗口")),
    );
  }
}

class NightView extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("夜间模式")),
      body: Center(child: Text("这是一个全屏的夜间模式窗口")),
    );
  }
}