哪个 Flutter 插件或功能可以利用外部 iOS/Android 显示器显示与主显示器不同的内容

Question

. Answers to this question are eligible for a +500 reputation bounty. Gabriel Solomon wants to to this question.

I am building a cross-platform app which needs to show a different view on an external display (usually connected via an HDMI adapter cable connected to a LCD projector.) Does Flutter have the ability to display a different screen on an external display either built-in or with an existing Flutter plugin? I would not want to write a bridge or plugin myself, as it would require native Swift ( UIScreen ) and Kotlin ( Presentation class ) code.

As I am exploring different cross-platform frameworks for iOS and Android I only found React Native with a usable package: React Native External Display - A React Native view renderer in External Display .

Is there anything similar available for Flutter or what would be the best way to approach this in Flutter?

Answer 1

You can try the presentation_displays . It supports running the app in 2 displays with independent images, not mirroring.

Answer 2

Flutter plugin supports to run on two screens. It's basically a tablet connected to another screen via an HDMI or Wireless

Plugin: link

Idea : We create a Widget by using Flutter code and pass it to Native code side then convert it to FlutterEngine and save it to FlutterEngineCache for later use.

Next, we define the Display by using displayId and we will define the UI flutter that needs to display by grabbing FlutterEngine in FlutterEngineCache and transferring it to Dialog Presentation as a View.

We provide methods to get a list of connected devices and the information of each device then transfer data from the main display to the secondary display.

Simple steps:

Create Widgets that need to display and define them as a permanent router when you configure the router in the Flutter code.

Get the Displays list by calling displayManager.getDisplays ()

Define which Display needs to display For instance: displays 1 .displayId Display the index 2.

Display it on Display with your routerName as presentation displayManager.showSecondaryDisplay (displayId: displays [1].displayId, routerName: "presentation")

Transmit the data from the main display to the secondary display by displayManager.transferDataToPresentation (" test transfer data ")

The secondary screen receives data

@override
Widget build (BuildContext context) {
    return SecondaryDisplay (
        callback: (argument) {
        setState (() {
        value = argument;
        });
    }
    );
}

Note: Extracted from Github page.