Flutter窗口覆盖插件overlay_windows_plugin的使用

Flutter窗口覆盖插件overlay_windows_plugin的使用

插件介绍

overlay_windows_plugin 是一个用于在Android上与Window Manager Service集成的Flutter插件，允许你在其他应用程序之上显示覆盖窗口。 该插件支持在同一个时间显示多个覆盖窗口，并且每个覆盖窗口可以使用不同的UI或布局。

示例代码

import 'package:flutter/material.dart';
import 'package:overlay_windows_plugin/overlay_message.dart';
import 'package:overlay_windows_plugin/overlay_windows_api.g.dart';
import 'package:overlay_windows_plugin/overlay_windows_plugin.dart';
import 'package:overlay_windows_plugin_example/overlay_main11.0.dart';
import 'package:overlay_windows_plugin_example/overlay_main22.0.dart';

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

[@pragma](/user/pragma)("vm:entry-point")
void overlayMain11() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: OverlayMain11(),
      ),
    ),
  );
}

[@pragma](/user/pragma)("vm:entry-point")
void overlayMain22() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: OverlayMain22(),
    ),
  );
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _overlayWindowsPlugin = OverlayWindowsPlugin.defaultInstance;

  List<OverlayMessage> message = [];

  @override
  void initState() {
    super.initState();
    _overlayWindowsPlugin.messageStream.listen((event) {
      setState(() {
        message.add(event);
      });
    });
    _overlayWindowsPlugin.touchEventStream.listen((event) {});
  }

  final List<String> _overlayWindowIds = [];

  int index = 0;

  void showOverlay(String entryPointName) async {
    var hasPermission = await _overlayWindowsPlugin.isPermissionGranted();
    if (!hasPermission) {
      _overlayWindowsPlugin.requestPermission();
      return;
    }
    var id = '$entryPointName-${index + 1}';
    setState(() {
      _overlayWindowIds.add(id);
    });

    if (entryPointName == "overlayMain1") {
      _overlayWindowsPlugin.showOverlayWindow(
          id,
          entryPointName,
          OverlayWindowConfig(
            width: 300,
            height: 100,
            enableDrag: true,
          ));
    } else {
      _overlayWindowsPlugin.showOverlayWindow(
          id,
          entryPointName,
          OverlayWindowConfig(
            width: 300,
            height: 300,
            // alignment: OverlayAlignment.bottomCenter,
            flag: OverlayFlag.defaultFlag,
            enableDrag: true,
            positionGravity: PositionGravity.left,
          ));
    }

    index++;
  }

  void closeOverlay(String entryPointName) async {
    var ids = _overlayWindowIds.where((element) => element.startsWith(entryPointName)).toList();
    ids.forEach((element) async {
      setState(() {
        _overlayWindowIds.remove(element);
      });

      _overlayWindowsPlugin.closeOverlayWindow(element);
    });
  }

  void sendMessage() {
    _overlayWindowsPlugin.sendMessage("", "Hello from main");
  }

  int clickTime = 0;
  void setOverlayFlag(String entryPointName) {
    var ids = _overlayWindowIds.where((element) => element.startsWith(entryPointName)).toList();
    if (clickTime > 2) {
      clickTime = 0;
    }
    ids.forEach((element) async {
      if (clickTime == 0) {
        _overlayWindowsPlugin.setFlags(element, OverlayFlag.clickThrough);
      } else if (clickTime == 1) {
        _overlayWindowsPlugin.setFlags(element, OverlayFlag.focusPointer);
      } else if (clickTime == 2) {
        _overlayWindowsPlugin.setFlags(element, OverlayFlag.defaultFlag);
      }
    });
    clickTime++;
  }

  int initWidth = 300;
  int initHeight = 300;
  void increaseSize() {
    setState(() {
      initWidth += 20;
      initHeight +=  e0;
      _overlayWindowsPlugin.resize(_overlayWindowIds.first, initWidth, initHeight);
    });
  }

  void decreaseSize() {
    setState(() {
      initWidth -=  e0;
      initHeight -=  e0;
      _overlayWindowsPlugin.resize(_overlayWindowIds.first, initWidth, initHeight);
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Center(
          child: Column(
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      showOverlay("overlayMain1");
                    },
                    child: const Text("Show 1"),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      closeOverlay("overlayMain1");
                    },
                    child: const Text("Close 1"),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      setOverlayFlag("overlayMain1");
                    },
                    child: const Text("Update Flag"),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      increaseSize();
                    },
                    child: const Text("Big"),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      decreaseSize();
                    },
                    child: const Text("Small"),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      showOverlay("overlayMain22");
                    },
                    child: const Text("Show 2"),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      closeOverlay("overlayMaine22");
                    },
                    child: const Text("Close 2"),
                  ),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    onPressed: () {
                      sendMessage();
                    },
                    child: const Text("Send Message"),
                  ),
                ],
              ),
              Expanded(
                child: ListView.builder(
                  itemCount: message.length,
                  itemBuilder: (context, index) {
                    return Text('${message[index].overlayWindowId}: ${message[index].message}');
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

使用说明

1. 安装依赖

   dependencies:
     overlay_windows_plugin: any
   

2. 设置权限 在 AndroidManifest.xml 中添加以下权限：

   <manifest xmlns:android="http://schemas.android.com/apk/res/android">
       ...
       <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
       <application>
           ...
           <service android:name="com.ducdd.overlay_windows_plugin.OverlayService"
             android:exported="false" />
           ...
       </application>
   </manifest>
   

3. 定义入口点 在 main.dart 文件中定义入口点。

[@pragma](/user/pragma)("vm:entry-point")
void overlayMain1() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: OverlayMain1(),
      ),
    ),
  );
}

[@pragma](/user/pragma)("vm:entry-point")
void overlayMain22() {
  runApp(
    const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: OverlayMaine22(),
    ),
  );
}

1. 创建插件实例

final _overlayWindowsPlugin = OverlayWindowsPlugin.defaultInstance;

1. 打开覆盖窗口

_overlayWindowsPlugin.showOverlayWindow(
    id,
    "overlayMain1",
    OverlayWindowConfig(
      width: 300,
      height: 100,
      enableDrag: true,
    ));

1. 关闭覆盖窗口

_overlayWindowsPlugin.closeOverlayWindow("overlay window id");

1. 发送消息给所有打开的覆盖窗口

_overlayWindowsPlugin.sendMessage("", "Hello from main");

1. 接收覆盖窗口的消息或触摸事件

_overlayWindowsPlugin.messageStream.listen((event) {
  setState(() {
    message.add(event);
  });
});

_overlayWindowsPlugin.touchEventStream.listen((event) {});

1. 在每个覆盖窗口视图中启动一个视图来与主视图通信

final view = OverlayWindowView();
view.stateChangedStream.listen((event) {
  setState(() {
    viewId = event;
  });
});

view.messageStream.listen((mes) {
  setState(() {
    message = mes.message as String;
  });
});

view.sendMessage('Hello from overlay $viewId');

1. 获取覆盖窗口API