Flutter desktop端多屏幕展示问题处理

目前越来越多的人用Flutter来做桌面程序的开发，很多应用场景在Flutter开发端还不是很成熟，有些场景目前还没有很好的插件来支持，所以落地Flutter桌面版还是要慎重。

下面来说一下近期我遇到的一个问题，之前遇到一个需要双屏展示的应用场景，而且双屏还要有交互，下面就介绍这种双屏的功能怎么实现。

首先介绍需要用到的插件：

desktop_multi_window

desktop_multi_window 用于实现一个应用可以打开多个窗口的功能，主要适配macOS、Windows以及Linux系统。

window_size

window_size 是google官方提供的一个插件，用于获取系统所有屏幕的信息，其中最重要的就是可以获取屏幕的位置，这个功能的作用是在使用desktop_multi_window打开一个新窗口时，通过window_size获取副屏的坐标位置，然后直接将新窗口定位到副屏上。

下面贴代码：

import 'dart:convert';
import 'dart:ui';import 'package:collection/collection.dart';
import 'package:desktop_lifecycle/desktop_lifecycle.dart';
import 'package:desktop_multi_window/desktop_multi_window.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_multi_window_example/event_widget.dart';
import 'package:device_info_plus/device_info_plus.dart';
import 'package:window_size/window_size.dart';void main(List<String> args) {if (args.firstOrNull == 'multi_window') {final windowId = int.parse(args[1]);final argument = args[2].isEmpty? const {}: jsonDecode(args[2]) as Map<String, dynamic>;runApp(_ExampleSubWindow(windowController: WindowController.fromWindowId(windowId),args: argument,));} else {runApp(const _ExampleMainWindow());}
}class _ExampleMainWindow extends StatefulWidget {const _ExampleMainWindow({Key? key}) : super(key: key);@overrideState<_ExampleMainWindow> createState() => _ExampleMainWindowState();
}class _ExampleMainWindowState extends State<_ExampleMainWindow> {@overridevoid initState() {// TODO: implement initStatesuper.initState();}@overrideWidget build(BuildContext context) {return const MaterialApp(home: App(),);}
}class App extends StatefulWidget{const App({Key? key}) : super(key: key);@overrideState<StatefulWidget> createState() {return AppState();}}
class AppState extends State<App>{List<Screen> screenList=[];@overridevoid initState() {// TODO: implement initStatesuper.initState();initDevice();}void  initDevice()async{screenList=await getScreenList();screenList.forEach((element) {print(element.frame);});}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Plugin example app'),),body: Column(children: [TextButton(onPressed: () async {final window =await DesktopMultiWindow.createWindow(jsonEncode({'args1': 'Sub window','args2': 100,'args3': true,'business': 'business_test',}));window..setFrame( screenList[screenList.length-1].frame)..setTitle('Another window')..show();},child: const Text('Create a new World!'),),TextButton(child: const Text('Send event to all sub windows'),onPressed: () async {final subWindowIds =await DesktopMultiWindow.getAllSubWindowIds();for (final windowId in subWindowIds) {DesktopMultiWindow.invokeMethod(windowId,'broadcast','Broadcast from main window',);}},),Expanded(child: EventWidget(controller: WindowController.fromWindowId(0)),)],),);}}class _ExampleSubWindow extends StatelessWidget {const _ExampleSubWindow({Key? key,required this.windowController,required this.args,}) : super(key: key);final WindowController windowController;final Map? args;@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: const Text('Plugin example app'),),body: Column(children: [if (args != null)Text('Arguments: ${args.toString()}',style: const TextStyle(fontSize: 20),),ValueListenableBuilder<bool>(valueListenable: DesktopLifecycle.instance.isActive,builder: (context, active, child) {if (active) {return const Text('Window Active');} else {return const Text('Window Inactive');}},),TextButton(onPressed: () async {windowController.close();},child: const Text('Close this window'),),Expanded(child: EventWidget(controller: windowController)),],),),);}
}

event_widget.dart

import 'package:desktop_multi_window/desktop_multi_window.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';class EventWidget extends StatefulWidget {const EventWidget({Key? key, required this.controller}) : super(key: key);final WindowController controller;@overrideState<EventWidget> createState() => _EventWidgetState();
}class MessageItem {const MessageItem({this.content, required this.from, required this.method});final int from;final dynamic content;final String method;@overrideString toString() {return '$method($from): $content';}@overrideint get hashCode => Object.hash(from, content, method);@overridebool operator ==(Object other) {if (identical(this, other)) {return true;}if (other.runtimeType != runtimeType) {return false;}final MessageItem typedOther = other as MessageItem;return typedOther.from == from && typedOther.content == content;}
}class _EventWidgetState extends State<EventWidget> {final messages = <MessageItem>[];final textInputController = TextEditingController();final windowInputController = TextEditingController();@overridevoid initState() {super.initState();DesktopMultiWindow.setMethodHandler(_handleMethodCallback);}@overridedispose() {DesktopMultiWindow.setMethodHandler(null);super.dispose();}Future<dynamic> _handleMethodCallback(MethodCall call, int fromWindowId) async {if (call.arguments.toString() == "ping") {return "pong";}setState(() {messages.insert(0,MessageItem(from: fromWindowId,method: call.method,content: call.arguments,),);});}@overrideWidget build(BuildContext context) {void submit() async {final text = textInputController.text;if (text.isEmpty) {return;}final windowId = int.tryParse(windowInputController.text);textInputController.clear();final result =await DesktopMultiWindow.invokeMethod(windowId!, "onSend", text);debugPrint("onSend result: $result");}return Column(children: [Expanded(child: ListView.builder(itemCount: messages.length,reverse: true,itemBuilder: (context, index) =>_MessageItemWidget(item: messages[index]),),),Row(children: [SizedBox(width: 100,child: TextField(controller: windowInputController,decoration: const InputDecoration(labelText: 'Window ID',),inputFormatters: [FilteringTextInputFormatter.digitsOnly],),),Expanded(child: TextField(controller: textInputController,decoration: const InputDecoration(hintText: 'Enter message',),onSubmitted: (text) => submit(),),),IconButton(icon: const Icon(Icons.send),onPressed: submit,),],),],);}
}class _MessageItemWidget extends StatelessWidget {const _MessageItemWidget({Key? key, required this.item}) : super(key: key);final MessageItem item;@overrideWidget build(BuildContext context) {return ListTile(title: Text("${item.method}(${item.from})"),subtitle: Text(item.content.toString()),);}
}

重点代码位置：

void main(List<String> args) {if (args.firstOrNull == 'multi_window') {final windowId = int.parse(args[1]);final argument = args[2].isEmpty? const {}: jsonDecode(args[2]) as Map<String, dynamic>;runApp(_ExampleSubWindow(windowController: WindowController.fromWindowId(windowId),args: argument,));} else {runApp(const _ExampleMainWindow());}
}

这块是判断显示副屏还是主屏，副屏创建也会走main函数。

  void  initDevice()async{screenList=await getScreenList();screenList.forEach((element) {print(element.frame);});}

这个是用window_size 插件中的getScreenList(),获取系统的所有屏幕信息。

       TextButton(onPressed: () async {final window =await DesktopMultiWindow.createWindow(jsonEncode({'args1': 'Sub window','args2': 100,'args3': true,'business': 'business_test',}));window..setFrame( screenList[screenList.length-1].frame)..setTitle('Another window')..show();},child: const Text('Create a new World!'),),

这块是开启新窗口的代码，其中setFrame( screenList[screenList.length-1].frame)是将副屏的frame给到窗口，这样创建出来的窗口就是直接在副屏的位置，同时是全屏的状态。