Flutter子屏幕管理插件flutter_subscreen_plugin的使用

Flutter子屏幕管理插件flutter_subscreen_plugin的使用

引言

flutter_subscreen_plugin 是一个用于支持双屏交互场景的Flutter插件，如主屏（操作屏）+ 副屏（客显屏）。该插件支持双屏安卓设备，主副屏均使用Flutter进行开发，并提供方法实现双屏间的通信交互。

新老方案对比

新方案统一了技术栈，主副屏都使用Flutter进行开发，降低了开发及后期维护成本。通过创新的双引擎通信机制，确保了主副屏之间的高效交互。

接入依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_subscreen_plugin: ^1.0.8

使用方法

1. 在main入口区分主副屏

void main() {
  var defaultRouteName = window.defaultRouteName;
  if ("subMain" == defaultRouteName) {
    viceScreenMain(); 
  } else {
    defaultMain();
  }
}

// 主屏UI
void defaultMain() {
  runApp(MaterialApp(home: MainApp(),));
}

// 副屏UI
void viceScreenMain() {
  runApp(SubApp());
}

2. 示例：主屏发送数据给副屏

SubScreenPlugin.sendMsgToViceScreen("data", params: {"params": "123"});

3. 示例：副屏接收主屏数据

SubScreenPlugin.viceStream.listen((event) {
  print(event.arguments.toString());
});

4. 提供方法：获取当前设备环境是否支持双屏

SubScreenPlugin.isMultipleScreen((result) {
  print("是否支持双屏：$result");
});

5. 提供方法：判断当前应用是否具备 overlay 窗口权限

SubScreenPlugin.checkOverlayPermission((result) {
  print("是否支持 overlay：$result");
});

6. 提供方法：申请 overlay 窗口权限，可将副屏设置为持久窗口

SubScreenPlugin.requestOverlayPermission();

7. 提供方法：开启，关闭副屏

SubScreenPlugin.doubleScreenShow();     // 开启
SubScreenPlugin.doubleScreenCancel();   // 关闭

8. 支付设置初始化完成后直接显示副屏

在 android/values/attrs.xml 中添加配置：

<!-- 是否在初始化时自动显示副屏 -->
<bool name="autoShowSubScreenWhenInit">true</bool>

9. 支持对副屏engine进行三方插件扩展

在 android/mainActivity/onCreate 方法中添加：

FlutterSubscreenPlugin.registerThirdPlugins(
  arrayListOf(
    io.flutter.plugins.camera.CameraPlugin(), // 对应的三方库名
  ),
  this.flutterEngine!!.plugins
);

整体调用关系架构

运行效果图

完成上述步骤后，简单的demo运行效果如下：

• 主屏

  

• 副屏

  

• 点击按键，接收主屏数据的副屏

  

完整示例Demo

以下是完整的示例代码，包括主屏和副屏的UI以及双屏通信的实现。

main.dart

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_subscreen_plugin/flutter_subscreen_plugin.dart';

void main() {
  var defaultRouteName = window.defaultRouteName;
  if ("subMain" == defaultRouteName) {
    viceScreenMain(); 
  } else {
    defaultMain();
  }
}

// 主屏UI
void defaultMain() {
  runApp(MaterialApp(
    home: MainApp(),
  ));
}

// 副屏UI
void viceScreenMain() {
  runApp(MaterialApp(
    home: SubApp(),
  ));
}

class MainApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('主屏')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                // 发送数据到副屏
                SubScreenPlugin.sendMsgToViceScreen("data", params: {"message": "Hello from main screen!"});
              },
              child: Text('发送数据到副屏'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 检查是否支持双屏
                SubScreenPlugin.isMultipleScreen((result) {
                  print("是否支持双屏：$result");
                });
              },
              child: Text('检查是否支持双屏'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 检查是否有overlay权限
                SubScreenPlugin.checkOverlayPermission((result) {
                  print("是否支持 overlay：$result");
                });
              },
              child: Text('检查是否有overlay权限'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 申请overlay权限
                SubScreenPlugin.requestOverlayPermission();
              },
              child: Text('申请overlay权限'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 开启副屏
                SubScreenPlugin.doubleScreenShow();
              },
              child: Text('开启副屏'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 关闭副屏
                SubScreenPlugin.doubleScreenCancel();
              },
              child: Text('关闭副屏'),
            ),
          ],
        ),
      ),
    );
  }
}

class SubApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('副屏')),
      body: Center(
        child: StreamBuilder(
          stream: SubScreenPlugin.viceStream, // 监听来自主屏的数据
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              final data = snapshot.data?.arguments as Map<String, dynamic>;
              return Text('收到主屏数据: ${data['message']}');
            } else {
              return Text('等待主屏数据...');
            }
          },
        ),
      ),
    );
  }
}