Refact. Flutter web desktop (#7539)

* Refact. Flutter web desktop Signed-off-by: fufesou <shuanglongchen@yeah.net> * Flutter web, prevent default context menu Signed-off-by: fufesou <shuanglongchen@yeah.net> --------- Signed-off-by: fufesou <shuanglongchen@yeah.net>
2025-10-29 17:00:05 +00:00 · 2024-03-28 11:38:11 +08:00
parent 810b980e6b
commit 6e44a91d0b
27 changed files with 362 additions and 153 deletions
--- a/flutter/lib/common/widgets/address_book.dart
+++ b/flutter/lib/common/widgets/address_book.dart
@@ -63,7 +63,7 @@ class _AddressBookState extends State<AddressBook> {
                  retry: null, // remove retry
                  close: () => gFFI.abModel.currentAbPushError.value = ''),
              Expanded(
-                  child: isDesktop
+                  child: (isDesktop || isWebDesktop)
                      ? _buildAddressBookDesktop()
                      : _buildAddressBookMobile())
            ],
@@ -311,7 +311,7 @@ class _AddressBookState extends State<AddressBook> {
            return tagBuilder(e);
          });
      final maxHeight = max(MediaQuery.of(context).size.height / 6, 100.0);
-      return isDesktop
+      return (isDesktop || isWebDesktop)
          ? gridView
          : LimitedBox(maxHeight: maxHeight, child: gridView);
    });
--- a/flutter/lib/common/widgets/dialog.dart
+++ b/flutter/lib/common/widgets/dialog.dart
@@ -1,6 +1,5 @@
 import 'dart:async';
 import 'dart:convert';
-import 'dart:io';

 import 'package:bot_toast/bot_toast.dart';
 import 'package:flutter/material.dart';
@@ -81,7 +80,7 @@ void changeIdDialog() {
      final Iterable violations = rules.where((r) => !r.validate(newId));
      if (violations.isNotEmpty) {
        setState(() {
-          msg = isDesktop
+          msg = (isDesktop || isWebDesktop)
              ? '${translate('Prompt')}:  ${violations.map((r) => r.name).join(', ')}'
              : violations.map((r) => r.name).join(', ');
        });
@@ -106,7 +105,7 @@ void changeIdDialog() {
      }
      setState(() {
        isInProgress = false;
-        msg = isDesktop
+        msg = (isDesktop || isWebDesktop)
            ? '${translate('Prompt')}: ${translate(status)}'
            : translate(status);
      });
@@ -143,7 +142,7 @@ void changeIdDialog() {
          const SizedBox(
            height: 8.0,
          ),
-          isDesktop
+          (isDesktop || isWebDesktop)
              ? Obx(() => Wrap(
                    runSpacing: 8,
                    spacing: 4,
@@ -1109,7 +1108,7 @@ void showRequestElevationDialog(
                errorText: errPwd.isEmpty ? null : errPwd.value,
              ),
            ],
-          ).marginOnly(left: isDesktop ? 35 : 0),
+          ).marginOnly(left: (isDesktop || isWebDesktop) ? 35 : 0),
        ).marginOnly(top: 10),
      ],
    ),
--- a/flutter/lib/common/widgets/my_group.dart
+++ b/flutter/lib/common/widgets/my_group.dart
@@ -47,7 +47,10 @@ class _MyGroupState extends State<MyGroup> {
              err: gFFI.groupModel.groupLoadError,
              retry: null,
              close: () => gFFI.groupModel.groupLoadError.value = ''),
-          Expanded(child: isDesktop ? _buildDesktop() : _buildMobile())
+          Expanded(
+              child: (isDesktop || isWebDesktop)
+                  ? _buildDesktop()
+                  : _buildMobile())
        ],
      );
    });
@@ -164,7 +167,7 @@ class _MyGroupState extends State<MyGroup> {
          itemCount: items.length,
          itemBuilder: (context, index) => _buildUserItem(items[index]));
      var maxHeight = max(MediaQuery.of(context).size.height / 6, 100.0);
-      return isDesktop
+      return (isDesktop || isWebDesktop)
          ? listView
          : LimitedBox(maxHeight: maxHeight, child: listView);
    });
--- a/flutter/lib/common/widgets/overlay.dart
+++ b/flutter/lib/common/widgets/overlay.dart
@@ -54,7 +54,7 @@ class DraggableChatWindow extends StatelessWidget {
                resizeToAvoidBottomInset: false,
                appBar: CustomAppBar(
                  onPanUpdate: onPanUpdate,
-                  appBar: isDesktop
+                  appBar: (isDesktop || isWebDesktop)
                      ? _buildDesktopAppBar(context)
                      : _buildMobileAppBar(context),
                ),
--- a/flutter/lib/common/widgets/peer_card.dart
+++ b/flutter/lib/common/widgets/peer_card.dart
@@ -3,7 +3,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_hbb/common/widgets/dialog.dart';
 import 'package:flutter_hbb/consts.dart';
-import 'package:flutter_hbb/models/ab_model.dart';
 import 'package:flutter_hbb/models/peer_tab_model.dart';
 import 'package:get/get.dart';
 import 'package:provider/provider.dart';
@@ -52,7 +51,7 @@ class _PeerCardState extends State<_PeerCard>
  @override
  Widget build(BuildContext context) {
    super.build(context);
-    if (isDesktop) {
+    if (isDesktop || isWebDesktop) {
      return _buildDesktop();
    } else {
      return _buildMobile();
@@ -883,8 +882,7 @@ class RecentPeerCard extends BasePeerCard {
      menuItems.add(_createShortCutAction(peer.id));
    }
    menuItems.add(MenuEntryDivider());
-    if (!isWeb) {
-      // TODO: support web version
+    if (isDesktop || isWebDesktop) {
      menuItems.add(_renameAction(peer.id));
    }
    if (await bind.mainPeerHasPassword(id: peer.id)) {
@@ -940,8 +938,7 @@ class FavoritePeerCard extends BasePeerCard {
      menuItems.add(_createShortCutAction(peer.id));
    }
    menuItems.add(MenuEntryDivider());
-    if (!isWeb) {
-      // TODO: support web version
+    if (isDesktop || isWebDesktop) {
      menuItems.add(_renameAction(peer.id));
    }
    if (await bind.mainPeerHasPassword(id: peer.id)) {
@@ -1046,8 +1043,7 @@ class AddressBookPeerCard extends BasePeerCard {
    }
    if (gFFI.abModel.current.canWrite()) {
      menuItems.add(MenuEntryDivider());
-      if (!isWeb) {
-        // TODO: support web version
+      if (isDesktop || isWebDesktop) {
        menuItems.add(_renameAction(peer.id));
      }
      if (gFFI.abModel.current.isPersonal() && peer.hash.isNotEmpty) {
@@ -1249,7 +1245,7 @@ void _rdpDialog(String id) async {
            ).marginOnly(bottom: isDesktop ? 8 : 0),
            Row(
              children: [
-                isDesktop
+                (isDesktop || isWebDesktop)
                    ? ConstrainedBox(
                        constraints: const BoxConstraints(minWidth: 140),
                        child: Text(
@@ -1260,15 +1256,17 @@ void _rdpDialog(String id) async {
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(
-                        labelText: isDesktop ? null : translate('Username')),
+                        labelText: (isDesktop || isWebDesktop)
+                            ? null
+                            : translate('Username')),
                    controller: userController,
                  ),
                ),
              ],
-            ).marginOnly(bottom: isDesktop ? 8 : 0),
+            ).marginOnly(bottom: (isDesktop || isWebDesktop) ? 8 : 0),
            Row(
              children: [
-                isDesktop
+                (isDesktop || isWebDesktop)
                    ? ConstrainedBox(
                        constraints: const BoxConstraints(minWidth: 140),
                        child: Text(
@@ -1280,7 +1278,9 @@ void _rdpDialog(String id) async {
                  child: Obx(() => TextField(
                        obscureText: secure.value,
                        decoration: InputDecoration(
-                            labelText: isDesktop ? null : translate('Password'),
+                            labelText: (isDesktop || isWebDesktop)
+                                ? null
+                                : translate('Password'),
                            suffixIcon: IconButton(
                                onPressed: () => secure.value = !secure.value,
                                icon: Icon(secure.value
--- a/flutter/lib/common/widgets/peer_tab_page.dart
+++ b/flutter/lib/common/widgets/peer_tab_page.dart
@@ -37,7 +37,7 @@ class _TabEntry {
 }

 EdgeInsets? _menuPadding() {
-  return isDesktop ? kDesktopMenuPadding : null;
+  return (isDesktop || isWebDesktop) ? kDesktopMenuPadding : null;
 }

 class _PeerTabPageState extends State<PeerTabPage>
@@ -113,7 +113,9 @@ class _PeerTabPageState extends State<PeerTabPage>
        SizedBox(
          height: 32,
          child: Container(
-            padding: isDesktop ? null : EdgeInsets.symmetric(horizontal: 2),
+            padding: (isDesktop || isWebDesktop)
+                ? null
+                : EdgeInsets.symmetric(horizontal: 2),
            child: selectionWrap(Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
@@ -127,7 +129,7 @@ class _PeerTabPageState extends State<PeerTabPage>
              ],
            )),
          ),
-        ).paddingOnly(right: isDesktop ? 12 : 0),
+        ).paddingOnly(right: (isDesktop || isWebDesktop) ? 12 : 0),
        _createPeersView(),
      ],
    );
@@ -195,7 +197,8 @@ class _PeerTabPageState extends State<PeerTabPage>
      }
    }
    return Expanded(
-        child: child.marginSymmetric(vertical: isDesktop ? 12.0 : 6.0));
+        child: child.marginSymmetric(
+            vertical: (isDesktop || isWebDesktop) ? 12.0 : 6.0));
  }

  Widget _createRefresh(
--- a/flutter/lib/common/widgets/peers_view.dart
+++ b/flutter/lib/common/widgets/peers_view.dart
@@ -78,7 +78,7 @@ class _PeersViewState extends State<_PeersView> with WindowListener {
    LoadEvent.lan: 'empty_lan_tip',
    LoadEvent.addressBook: 'empty_address_book_tip',
  });
-  final space = isDesktop ? 12.0 : 8.0;
+  final space = (isDesktop || isWebDesktop) ? 12.0 : 8.0;
  final _curPeers = <String>{};
  var _lastChangeTime = DateTime.now();
  var _lastQueryPeers = <String>{};
@@ -200,7 +200,7 @@ class _PeersViewState extends State<_PeersView> with WindowListener {
                  Provider.of<PeerTabModel>(context, listen: false).currentTab;
              final hideAbTagsPanel =
                  bind.mainGetLocalOption(key: "hideAbTagsPanel").isNotEmpty;
-              return isDesktop
+              return (isDesktop || isWebDesktop)
                  ? Obx(
                      () => SizedBox(
                        width: peerCardUiType.value != PeerUiType.list
--- a/flutter/lib/common/widgets/remote_input.dart
+++ b/flutter/lib/common/widgets/remote_input.dart
@@ -77,7 +77,7 @@ class _RawTouchGestureDetectorRegionState
  FFI get ffi => widget.ffi;
  FfiModel get ffiModel => widget.ffiModel;
  InputModel get inputModel => widget.inputModel;
-  bool get handleTouch => isDesktop || ffiModel.touchMode;
+  bool get handleTouch => (isDesktop || isWebDesktop) || ffiModel.touchMode;
  SessionID get sessionId => ffi.sessionId;

  @override
@@ -183,7 +183,7 @@ class _RawTouchGestureDetectorRegionState
    if (lastDeviceKind != PointerDeviceKind.touch) {
      return;
    }
-    if (isDesktop || !ffiModel.touchMode) {
+    if ((isDesktop || isWebDesktop) || !ffiModel.touchMode) {
      inputModel.tap(MouseButtons.right);
    }
  }
@@ -262,7 +262,7 @@ class _RawTouchGestureDetectorRegionState
    if (lastDeviceKind != PointerDeviceKind.touch) {
      return;
    }
-    if (isDesktop) {
+    if ((isDesktop || isWebDesktop)) {
      final scale = ((d.scale - _scale) * 1000).toInt();
      _scale = d.scale;

@@ -286,7 +286,7 @@ class _RawTouchGestureDetectorRegionState
    if (lastDeviceKind != PointerDeviceKind.touch) {
      return;
    }
-    if (isDesktop) {
+    if ((isDesktop || isWebDesktop)) {
      bind.sessionSendPointer(
          sessionId: sessionId,
          msg: json.encode(
@@ -409,7 +409,9 @@ class RawPointerMouseRegion extends StatelessWidget {
      onPointerPanZoomUpdate: inputModel.onPointerPanZoomUpdate,
      onPointerPanZoomEnd: inputModel.onPointerPanZoomEnd,
      child: MouseRegion(
-        cursor: cursor ?? MouseCursor.defer,
+        cursor: inputModel.isViewOnly
+            ? MouseCursor.defer
+            : (cursor ?? MouseCursor.defer),
        onEnter: onEnter,
        onExit: onExit,
        child: child,
--- a/flutter/lib/common/widgets/setting_widgets.dart
+++ b/flutter/lib/common/widgets/setting_widgets.dart
@@ -209,10 +209,10 @@ List<Widget> ServerConfigImportExportWidgets(
 List<(String, String)> otherDefaultSettings() {
  List<(String, String)> v = [
    ('View Mode', 'view_only'),
-    if (isDesktop) ('show_monitors_tip', kKeyShowMonitorsToolbar),
-    if (isDesktop) ('Collapse toolbar', 'collapse_toolbar'),
+    if ((isDesktop || isWebDesktop)) ('show_monitors_tip', kKeyShowMonitorsToolbar),
+    if ((isDesktop || isWebDesktop)) ('Collapse toolbar', 'collapse_toolbar'),
    ('Show remote cursor', 'show_remote_cursor'),
-    if (isDesktop) ('Zoom cursor', 'zoom-cursor'),
+    if ((isDesktop || isWebDesktop)) ('Zoom cursor', 'zoom-cursor'),
    ('Show quality monitor', 'show_quality_monitor'),
    ('Mute', 'disable_audio'),
    if (isDesktop) ('Enable file copy and paste', 'enable_file_transfer'),
--- a/flutter/lib/common/widgets/toolbar.dart
+++ b/flutter/lib/common/widgets/toolbar.dart
@@ -94,7 +94,7 @@ List<TTextMenu> toolbarControls(BuildContext context, String id, FFI ffi) {
          Text(translate(pi.isHeadless ? 'OS Account' : 'OS Password')),
        ]),
        trailingIcon: Transform.scale(
-          scale: isDesktop ? 0.8 : 1,
+          scale: (isDesktop || isWebDesktop) ? 0.8 : 1,
          child: IconButton(
            onPressed: () {
              if (isMobile && Navigator.canPop(context)) {
@@ -160,7 +160,7 @@ List<TTextMenu> toolbarControls(BuildContext context, String id, FFI ffi) {
    );
  }
  // divider
-  if (isDesktop) {
+  if (isDesktop || isWebDesktop) {
    v.add(TTextMenu(child: Offstage(), onPressed: () {}, divider: true));
  }
  // ctrlAltDel
@@ -229,7 +229,7 @@ List<TTextMenu> toolbarControls(BuildContext context, String id, FFI ffi) {
    ));
  }
  // record
-  if (!isDesktop &&
+  if (!(isDesktop || isWeb) &&
      (ffi.recordingModel.start || (perms["recording"] != false))) {
    v.add(TTextMenu(
        child: Row(
@@ -250,7 +250,7 @@ List<TTextMenu> toolbarControls(BuildContext context, String id, FFI ffi) {
        onPressed: () => ffi.recordingModel.toggle()));
  }
  // fingerprint
-  if (!isDesktop) {
+  if (!(isDesktop || isWebDesktop)) {
    v.add(TTextMenu(
      child: Text(translate('Copy Fingerprint')),
      onPressed: () => onCopyFingerprint(FingerprintState.find(id).value),
@@ -511,8 +511,8 @@ Future<List<TToggleMenu>> toolbarDisplayToggle(
        child: Text(translate('Show displays as individual windows'))));
  }

-  final screenList = await getScreenRectList();
-  if (useTextureRender && pi.isSupportMultiDisplay && screenList.length > 1) {
+  final isMultiScreens = !isWeb && (await getScreenRectList()).length > 1;
+  if (useTextureRender && pi.isSupportMultiDisplay && isMultiScreens) {
    final value = bind.sessionGetUseAllMyDisplaysForTheRemoteSession(
            sessionId: ffi.sessionId) ==
        'Y';