Flutter外部显示控制插件external_display的使用

external_display 是一个支持在Flutter应用中连接外部显示器的插件。它不仅可以通过有线或无线连接到外部显示器，还允许主视图和外部显示器视图之间互相传输数据。

Getting Started

iOS配置

如果你需要在iOS平台上使用 external_display 插件，请在 AppDelegate.swift 中加入以下代码：

import external_display

override func application(
  _ application: UIApplication,
  didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
  ExternalDisplayPlugin.registerGeneratedPlugin = registerGeneratedPlugin
  // 其他初始化代码
}

func registerGeneratedPlugin(controller:FlutterViewController) {
  GeneratedPluginRegistrant.register(with: controller)
}

参考示例：GitHub上的完整示例

外部显示器入口点 externalDisplayMain

在Dart文件中定义外部显示器的入口点：

[@pragma](/user/pragma)('vm:entry-point')
void externalDisplayMain() {
  runApp(const MaterialApp(home: ExternalView()));
}

创建 ExternalDisplay 变量

ExternalDisplay externalDisplay = ExternalDisplay();

监控外部显示器的插入和拔出

监听显示器的状态变化：

externalDisplay.addListener(onDisplayChange);

取消监听：

externalDisplay.removeListener(onDisplayChange);

获取显示器状态

bool isPlugging = externalDisplay.isPlugging;

获取外部显示器分辨率

Resolution? resolution = externalDisplay.resolution;

连接显示器

可以不指定路由名称直接连接：

await externalDisplay.connect();

或者指定路由名称连接：

await externalDisplay.connect(routeName: "YourRouteName");

主视图参数传递

添加接收参数监听器

从外部视图接收参数：

transferParameters.addListener(({required action, value}) {
  print(action);
  print(value);
});

移除接收参数监听器：

transferParameters.removeListener(receive);

向外部视图发送参数

await externalDisplay.sendParameters(action: "actionName", value: {"key": "value"});

确保外部显示器准备好接收参数

在连接外部显示器后，如果需要立即发送参数，则需要确保外部显示器已经准备好接收参数：

externalDisplay.waitingTransferParametersReady(
  onReady: () {
    print("Transfer parameters ready, transfer data!");
    externalDisplay.sendParameters(action: "action", value: "data");
  },
  onError: () { 
    print("Transfer parameters fail!");
  }
);

示例Demo

下面是一个完整的示例，展示了如何使用 external_display 插件来连接外部显示器并进行基本的操作：

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

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

[@pragma](/user/pragma)('vm:entry-point')
void externalDisplayMain() {
  runApp(const MaterialApp(
    home: ExternalView(),
  ));
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Home(),
    );
  }
}

class ExternalView extends StatelessWidget {
  const ExternalView({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('This is the external view.'),
      ),
    );
  }
}

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

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final ExternalDisplay externalDisplay = ExternalDisplay();
  String state = "Unplug";
  String resolution = "";

  void onDisplayChange(bool connecting) {
    if (connecting) {
      setState(() {
        state = "Plug";
      });
    } else {
      setState(() {
        state = "Unplug";
        resolution = "";
      });
    }
  }

  [@override](/user/override)
  void initState() {
    super.initState();
    externalDisplay.addListener(onDisplayChange);
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('External Display Example'),
      ),
      body: Container(
        color: Colors.white,
        child: Column(
          children: [
            Container(
              height: 100,
              alignment: Alignment.center,
              child: Text("External Monitor is $state"),
            ),
            Container(
              height: 100,
              alignment: Alignment.center,
              child: TextButton(
                style: ButtonStyle(
                  foregroundColor: MaterialStateProperty.all<Color>(Colors.blue),
                ),
                onPressed: () async {
                  await externalDisplay.connect();
                  setState(() {
                    resolution = "width:${externalDisplay.resolution?.width}px, height:${externalDisplay.resolution?.height}px";
                  });
                },
                child: const Text("Connect"),
              ),
            ),
            Container(
              height: 100,
              alignment: Alignment.center,
              child: Text(resolution),
            ),
          ],
        ),
      ),
    );
  }
}