4

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?

ChrisW
  • 880
  • 10
  • 16
  • What did you end up doing? – Srikanth Jul 06 '23 at 04:16
  • 1
    @Srikanth I decided to implement the app on ReactNative as this feature and a few others were easier to implement there. I never got to trying the reasonable looking solution below which was posted a year after the original question. – ChrisW Aug 03 '23 at 13:38

2 Answers2

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

enter image description here

Note: Extracted from Github page.

Arda Kazancı
  • 8,341
  • 4
  • 28
  • 50
1

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

lepsch
  • 8,927
  • 5
  • 24
  • 44
  • The above answer also mentions the same package. but it also gave a lot more explanation. – shree bhagwat Jul 29 '22 at 08:10
  • How can I share the same state but different view? For example, if the item list changes from main or secondary, should affect both screen. And also the secondary screen should invoke some event in main screen. – c-an Feb 16 '23 at 03:33