Flutter演示展示插件flutter_presentation_display的使用

Flutter演示展示插件flutter_presentation_display的使用

Flutter Presentation Display 是一个专为多显示器设计的Flutter插件，支持处理辅助（演示）显示器。它提供了与已连接显示器交互的方法，传输数据，并响应显示器连接状态的变化。该插件已在SUNMI T2s上进行了测试。

功能

  • 获取已连接显示器列表
  • 显示和隐藏辅助（演示）显示器
  • 将数据从主显示器传输到辅助显示器或反之亦然
  • 监听显示器连接状态变化

安装

在 pubspec.yaml 文件中添加 flutter_presentation_display：

dependencies:
  flutter:
    sdk: flutter
  flutter_presentation_display: any  # 替换为最新版本

使用

导入包

import 'package:flutter_presentation_display/flutter_presentation_display.dart';

初始化FlutterPresentationDisplay

创建 FlutterPresentationDisplay 的实例：

final display = FlutterPresentationDisplay();

获取显示器列表

获取已连接显示器的列表：

List<Display>? displays = await display.getDisplays();

根据ID获取显示器名称

通过ID检索显示器名称：

String? displayName = await display.getNameByDisplayId(1);

根据索引获取显示器名称

通过索引检索显示器名称：

String? displayName = await display.getNameByIndex(0);

显示和隐藏辅助显示器

显示辅助显示器

通过特定ID和路由器名称显示辅助显示器：

bool? result = await display.showSecondaryDisplay(
  displayId: 1,
  routerName: "presentation",
);

隐藏辅助显示器

通过ID隐藏辅助显示器：

bool? result = await display.hideSecondaryDisplay(displayId: 1);

在显示器间传输数据

向辅助显示器传输数据

向辅助（演示）显示器传输数据：

bool? result = await display.transferDataToPresentation({"key": "value"});

向主显示器传输数据

向主显示器传输数据：

bool? result = await display.transferDataToMain({"key": "value"});

监听显示器连接状态变化

监听已连接显示器的状态变化：

display.connectedDisplaysChangedStream.listen((int? displayId) {
  print('Connected display ID: $displayId');
});

监听来自显示器的数据

监听来自辅助显示器的数据

监听来自辅助（演示）显示器的数据：

display.listenDataFromPresentationDisplay((dynamic data) {
  print('Data from Presentation Display: $data');
});

监听来自主显示器的数据

监听来自主显示器的数据：

display.listenDataFromMainDisplay((dynamic data) {
  print('Data from Main Display: $data');
});

示例

查看 example 目录中的完整示例应用程序，以了解如何使用 flutter_presentation_display 包。

许可证

该插件基于 presentation_displays，采用BSD 2-Clause许可证。 flutter_presentation_display 是原始版本的修改版。


### 示例代码

```dart
import 'package:flutter/material.dart';
import 'package:flutter_presentation_display_example/route.dart';

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

[@pragma](/user/pragma)('vm:entry-point')
void secondaryDisplayMain() {
  runApp(const MySecondApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      onGenerateRoute: generateRoute,
      initialRoute: '/',
    );
  }
}

class MySecondApp extends StatelessWidget {
  const MySecondApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      onGenerateRoute: generateRoute,
      initialRoute: 'presentation',
    );
  }
}

更多关于Flutter演示展示插件flutter_presentation_display的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter演示展示插件flutter_presentation_display的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个使用 flutter_presentation_display 插件的简单示例代码，用于在 Flutter 应用中演示和展示第二个屏幕（例如投影仪或外接显示器）的功能。

首先，确保你已经在 pubspec.yaml 文件中添加了 flutter_presentation_display 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_presentation_display: ^0.x.x  # 请替换为最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，是一个简单的示例代码，展示如何使用 flutter_presentation_display 插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Presentation Display Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
  PresentationDisplay? _presentationDisplay;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance!.addObserver(this);
    initPresentationDisplay();
  }

  @override
  void dispose() {
    WidgetsBinding.instance!.removeObserver(this);
    _presentationDisplay?.dispose();
    super.dispose();
  }

  void initPresentationDisplay() async {
    _presentationDisplay = PresentationDisplay.connect();
    _presentationDisplay!.addListener(() {
      if (_presentationDisplay!.connected) {
        print("Presentation display connected!");
        // 在这里启动展示逻辑
        _presentationDisplay!.setScene(createPresentationScene());
      } else {
        print("Presentation display disconnected.");
      }
    });
  }

  Widget createPresentationScene() {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Presentation Screen'),
        ),
        body: Center(
          child: Text(
            'Hello, this is the presentation display!',
            style: TextStyle(fontSize: 36),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 这里可以添加逻辑来控制展示内容的切换等
            print("Main screen button pressed.");
          },
          child: Text('Press Me'),
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个基本的 Flutter 应用，包含主屏幕和演示屏幕。
  2. 使用 PresentationDisplay.connect() 方法连接到第二个显示设备（如果有的话）。
  3. 当第二个显示设备连接上时，通过监听 _presentationDisplay 的状态变化，我们在该屏幕上显示一个简单的 MaterialApp，其中包含一个 Scaffold 和一些文本。
  4. 主屏幕上有一个按钮，虽然在这个示例中按钮没有实际功能，但你可以根据需求添加逻辑来控制展示内容的切换等。

请注意，flutter_presentation_display 插件的具体用法和功能可能会随着版本的更新而变化，因此请参考官方文档和示例代码以确保最佳实践和兼容性。

回到顶部