display switch

flutter_hbb/lib/model.dart

@@ -34,6 +34,7 @@ class FfiModel with ChangeNotifier {
 
   get permissions => _permissions;
   get initialized => _initialized;
+  get pi => _pi;
 
   FfiModel() {
     clear();
@@ -118,6 +119,7 @@ class FfiModel with ChangeNotifier {
     _display.width = int.parse(evt['width']);
     _display.height = int.parse(evt['height']);
     FFI.cursorModel.updateDisplayOrigin(_display.x, _display.y);
+    notifyListeners();
   }
 
   void handlePeerInfo(Map<String, dynamic> evt) {

flutter_hbb/lib/remote_page.dart

@@ -279,6 +279,7 @@ class _RemotePageState extends State<RemotePage> {
           minWidth: 0, //wraps child's width
           height: 0,
           child: FlatButton(
+              splashColor: Colors.black,
               shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(5.0),
               ),
@@ -568,11 +569,45 @@ void showOptions(BuildContext context) {
       FFI.getByName('toggle_option', 'lock-after-session-end') == 'true';
   String quality = FFI.getByName('image_quality');
   if (quality == '') quality = 'balanced';
+  var displays = <Widget>[];
+  final pi = FFI.ffiModel.pi;
+  if (pi.displays.length > 1) {
+    final cur = pi.currentDisplay;
+    final children = <Widget>[];
+    for (var i = 0; i < pi.displays.length; ++i)
+      children.add(InkWell(
+          onTap: () {
+            if (i == cur) return;
+            FFI.setByName('switch_display', i.toString());
+            Navigator.pop(context);
+          },
+          child: Ink(
+              width: 40,
+              height: 40,
+              decoration: BoxDecoration(
+                  border: Border.all(color: Colors.black87),
+                  color: i == cur ? Colors.black87 : Colors.white),
+              child: Center(
+                  child: Text((i + 1).toString(),
+                      style: TextStyle(
+                          color: i == cur ? Colors.white : Colors.black87))))));
+    displays.add(Padding(
+        padding: const EdgeInsets.only(top: 8),
+        child: Wrap(
+          alignment: WrapAlignment.center,
+          spacing: 8,
+          children: children,
+        )));
+    displays.add(Divider(color: MyTheme.border));
+  }
   showAlertDialog(
       context,
       (setState) => Tuple3(
           null,
-          Column(mainAxisSize: MainAxisSize.min, children: [
+          Column(
+              mainAxisSize: MainAxisSize.min,
+              children: displays +
+                  <Widget>[
                     RadioListTile<String>(
                       controlAffinity: ListTileControlAffinity.trailing,
                       title: const Text('Good image quality'),
@@ -609,13 +644,14 @@ void showOptions(BuildContext context) {
                         });
                       },
                     ),
-            Divider(color: Colors.black),
+                    Divider(color: MyTheme.border),
                     CheckboxListTile(
                         value: showRemoteCursor,
                         onChanged: (v) {
                           setState(() {
                             showRemoteCursor = v;
-                    FFI.setByName('toggle_option', 'show-remote-cursor');
+                            FFI.setByName(
+                                'toggle_option', 'show-remote-cursor');
                           });
                         },
                         title: Text('Show remote cursor')),
@@ -624,7 +660,8 @@ void showOptions(BuildContext context) {
                         onChanged: (v) {
                           setState(() {
                             lockAfterSessionEnd = v;
-                    FFI.setByName('toggle_option', 'lock-after-session-end');
+                            FFI.setByName(
+                                'toggle_option', 'lock-after-session-end');
                           });
                         },
                         title: Text('Lock after session end'))