CODEWITHSUNDEEP
androidiosfluttercross-platformmultiscreen
ChrisW
ChrisW

Reputation: 970

Which Flutter plugin or feature can utilize an external iOS/Android display showing separate content from the main display

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?

Upvotes: 6

Views: 1875

Answers (2)

ΓDΛ
ΓDΛ

Reputation: 11080

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;
        });
    }
    );
}

enter image description here

Note: Extracted from Github page.

Upvotes: 4

lepsch
lepsch

Reputation: 10349

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

Upvotes: 3

Related Questions