External Display #

The Flutter plugin supports connecting to an external display via wired or wireless connections. The main view and the external display view can exchange data with each other.

Getting Started #

iOS #

If the external_display plugin is used, add the following code to 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)
}

Example: https://github.com/GavinFu7/external_display/blob/main/example/ios/Runner/AppDelegate.swift

External Display Entry Point externalDisplayMain #

@pragma('vm:entry-point')
void externalDisplayMain() {}

Create externalDisplay Variable #

ExternalDisplay externalDisplay = ExternalDisplay();

Monitor External Display Plugging and Unplugging #

externalDisplay.addListener(onDisplayChange);

Cancel External Display Monitoring #

externalDisplay.removeListener(onDisplayChange);

Get the Connection Status #

externalDisplay.isPlugging

Get the External Display Resolution #

externalDisplay.resolution

Connecting to the External Display #

await externalDisplay.connect();

or

await externalDisplay.connect(routeName: name);

Main View: Transferring Parameters #

Add a Listener to Receive Parameters from the External View #

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

Remove the Listener #

transferParameters.removeListener(receive);

Transfer Parameters to the External View #

await externalDisplay.sendParameters(action: actionName, value: parameters);

Wait for External Monitor to Be Ready to Receive Parameters #

If you need to transfer parameters immediately after connecting to the external monitor, use waitingTransferParametersReady to ensure the external monitor is ready to receive data.

externalDisplay.connect();
externalDisplay.waitingTransferParametersReady(
  onReady: () {
    print("Ready to transfer parameters, sending data!");
    externalDisplay.transferParameters(action: "action", value: "data");
  },
  onError: () { // Waiting timeout
    print("Failed to transfer parameters!");
  }
);

External View: Transferring Parameters #

Import transfer_parameters.dart #

import 'package:external_display/transfer_parameters.dart';

Create transferParameters Variable #

TransferParameters transferParameters = TransferParameters();

Add a Listener to Receive Parameters from the Main View #

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

Remove the Listener #

transferParameters.removeListener(receive);

Transfer Parameters to the Main View #

await transferParameters.sendParameters(action: actionName, value: parameters);

Example #

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

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

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

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

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

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

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

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

  @override
  State<Home> createState() => _HomeState();
}

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

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

  @override
  void initState() {
    super.initState();
    externalDisplay.addListener(onDisplayChange);
  }

  @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),
            ),
          ],
        ),
      ),
    );
  }
}