Merge pull request #1252 from 21pages/tabbar

Tabbar

flutter/lib/consts.dart

@@ -2,3 +2,5 @@ const double kDesktopRemoteTabBarHeight = 48.0;
 const String kAppTypeMain = "main";
 const String kAppTypeDesktopRemote = "remote";
 const String kAppTypeDesktopFileTransfer = "file transfer";
+const String kTabLabelHomePage = "Home";
+const String kTabLabelSettingPage = "Settings";

flutter/lib/desktop/pages/connection_page.dart

@@ -57,7 +57,6 @@ class _ConnectionPageState extends State<ConnectionPage> {
   @override
   Widget build(BuildContext context) {
     return Container(
-      decoration: BoxDecoration(color: isDarkTheme() ? null : MyTheme.grayBg),
       child: Column(
           mainAxisAlignment: MainAxisAlignment.start,
           mainAxisSize: MainAxisSize.max,

flutter/lib/desktop/pages/connection_tab_page.dart

@@ -1,5 +1,4 @@
 import 'dart:convert';
-import 'dart:math';
 
 import 'package:desktop_multi_window/desktop_multi_window.dart';
 import 'package:flutter/material.dart';
@@ -9,7 +8,6 @@ import 'package:flutter_hbb/desktop/pages/remote_page.dart';
 import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
 import 'package:flutter_hbb/utils/multi_window_manager.dart';
 import 'package:get/get.dart';
-import 'package:window_manager/window_manager.dart';
 
 import '../../models/model.dart';
 
@@ -26,24 +24,23 @@ class _ConnectionTabPageState extends State<ConnectionTabPage>
     with TickerProviderStateMixin {
   // refactor List<int> when using multi-tab
   // this singleton is only for test
-  var connectionIds = RxList<String>.empty(growable: true);
+  RxList<TabInfo> tabs = RxList<TabInfo>.empty(growable: true);
-  var initialIndex = 0;
   late Rx<TabController> tabController;
   static final Rx<int> _selected = 0.obs;
+  IconData icon = Icons.desktop_windows_sharp;
 
   var connectionMap = RxList<Widget>.empty(growable: true);
 
   _ConnectionTabPageState(Map<String, dynamic> params) {
     if (params['id'] != null) {
-      connectionIds.add(params['id']);
+      tabs.add(TabInfo(label: params['id'], icon: icon));
     }
   }
 
   @override
   void initState() {
     super.initState();
-    tabController =
+    tabController = TabController(length: tabs.length, vsync: this).obs;
-        TabController(length: connectionIds.length, vsync: this).obs;
     rustDeskWinManager.setMethodHandler((call, fromWindowId) async {
       print(
           "call ${call.method} with args ${call.arguments} from window ${fromWindowId}");
@@ -52,23 +49,13 @@ class _ConnectionTabPageState extends State<ConnectionTabPage>
         final args = jsonDecode(call.arguments);
         final id = args['id'];
         window_on_top(windowId());
-        final indexOf = connectionIds.indexOf(id);
+        DesktopTabBar.onAdd(this, tabController, tabs, _selected,
-        if (indexOf >= 0) {
+            TabInfo(label: id, icon: icon));
-          initialIndex = indexOf;
-          tabController.value.animateTo(initialIndex, duration: Duration.zero);
-        } else {
-          connectionIds.add(id);
-          initialIndex = connectionIds.length - 1;
-          tabController.value = TabController(
-              length: connectionIds.length,
-              vsync: this,
-              initialIndex: initialIndex);
-        }
-        _selected.value = initialIndex;
       } else if (call.method == "onDestroy") {
-        print("executing onDestroy hook, closing ${connectionIds}");
+        print(
-        connectionIds.forEach((id) {
+            "executing onDestroy hook, closing ${tabs.map((tab) => tab.label).toList()}");
-          final tag = '${id}';
+        tabs.forEach((tab) {
+          final tag = '${tab.label}';
           ffi(tag).close().then((_) {
             Get.delete<FFI>(tag: tag);
           });
@@ -83,20 +70,21 @@ class _ConnectionTabPageState extends State<ConnectionTabPage>
     return Scaffold(
       body: Column(
         children: [
-          Obx(() => DesktopTabBar(
+          DesktopTabBar(
             controller: tabController,
-                tabs: connectionIds.toList(),
+            tabs: tabs,
             onTabClose: onRemoveId,
-                tabIcon: Icons.desktop_windows_sharp,
             selected: _selected,
-              )),
+            dark: isDarkTheme(),
+            mainTab: false,
+          ),
           Expanded(
               child: Obx(() => TabBarView(
                   controller: tabController.value,
-                  children: connectionIds
+                  children: tabs
-                      .map((e) => RemotePage(
+                      .map((tab) => RemotePage(
-                            key: ValueKey(e),
+                            key: ValueKey(tab.label),
-                            id: e,
+                            id: tab.label,
                             tabBarHeight: kDesktopRemoteTabBarHeight,
                           )) //RemotePage(key: ValueKey(e), id: e))
                       .toList()))),
@@ -106,15 +94,8 @@ class _ConnectionTabPageState extends State<ConnectionTabPage>
   }
 
   void onRemoveId(String id) {
-    final indexOf = connectionIds.indexOf(id);
+    DesktopTabBar.onClose(this, tabController, tabs, id);
-    if (indexOf == -1) {
+    if (tabs.length == 0) {
-      return;
-    }
-    connectionIds.removeAt(indexOf);
-    initialIndex = max(0, initialIndex - 1);
-    tabController.value = TabController(
-        length: connectionIds.length, vsync: this, initialIndex: initialIndex);
-    if (connectionIds.length == 0) {
       WindowController.fromWindowId(windowId()).close();
     }
   }

flutter/lib/desktop/pages/desktop_home_page.dart

@@ -6,7 +6,6 @@ import 'package:flutter/material.dart' hide MenuItem;
 import 'package:flutter/services.dart';
 import 'package:flutter_hbb/common.dart';
 import 'package:flutter_hbb/desktop/pages/connection_page.dart';
-import 'package:flutter_hbb/desktop/widgets/titlebar_widget.dart';
 import 'package:flutter_hbb/models/platform_model.dart';
 import 'package:flutter_hbb/models/server_model.dart';
 import 'package:flutter_hbb/utils/multi_window_manager.dart';
@@ -46,23 +45,7 @@ class _DesktopHomePageState extends State<DesktopHomePage>
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    return Row(
-      body: Column(
-        children: [
-          DesktopTitleBar(
-            child: Center(
-              child: Text(
-                "RustDesk",
-                style: TextStyle(
-                    color: Colors.white,
-                    fontSize: 20,
-                    fontWeight: FontWeight.bold),
-              ),
-            ),
-          ),
-          Expanded(
-            child: Container(
-              child: Row(
       children: [
         Flexible(
           child: buildServerInfo(context),
@@ -73,11 +56,6 @@ class _DesktopHomePageState extends State<DesktopHomePage>
           flex: 4,
         ),
       ],
-              ),
-            ),
-          ),
-        ],
-      ),
     );
   }
 

flutter/lib/desktop/pages/desktop_setting_page.dart

@@ -0,0 +1,15 @@
+import 'package:flutter/cupertino.dart';
+
+class DesktopSettingPage extends StatefulWidget {
+  DesktopSettingPage({Key? key}) : super(key: key);
+
+  @override
+  State<DesktopSettingPage> createState() => _DesktopSettingPageState();
+}
+
+class _DesktopSettingPageState extends State<DesktopSettingPage> {
+  @override
+  Widget build(BuildContext context) {
+    return Text("Settings");
+  }
+}

flutter/lib/desktop/pages/desktop_tab_page.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hbb/common.dart';
+import 'package:flutter_hbb/consts.dart';
+import 'package:flutter_hbb/desktop/pages/desktop_home_page.dart';
+import 'package:flutter_hbb/desktop/pages/desktop_setting_page.dart';
+import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
+import 'package:get/get.dart';
+
+class DesktopTabPage extends StatefulWidget {
+  const DesktopTabPage({Key? key}) : super(key: key);
+
+  @override
+  State<DesktopTabPage> createState() => _DesktopTabPageState();
+}
+
+class _DesktopTabPageState extends State<DesktopTabPage>
+    with TickerProviderStateMixin {
+  late Rx<TabController> tabController;
+  late RxList<TabInfo> tabs;
+  static final Rx<int> _selected = 0.obs;
+
+  @override
+  void initState() {
+    super.initState();
+    tabs = RxList.from([
+      TabInfo(label: kTabLabelHomePage, icon: Icons.home_sharp, closable: false)
+    ], growable: true);
+    tabController =
+        TabController(length: tabs.length, vsync: this, initialIndex: 0).obs;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Column(
+        children: [
+          DesktopTabBar(
+            controller: tabController,
+            tabs: tabs,
+            onTabClose: onTabClose,
+            selected: _selected,
+            dark: isDarkTheme(),
+            mainTab: true,
+            onAddSetting: onAddSetting,
+          ),
+          Obx((() => Expanded(
+                child: TabBarView(
+                    controller: tabController.value,
+                    children: tabs.map((tab) {
+                      switch (tab.label) {
+                        case kTabLabelHomePage:
+                          return DesktopHomePage(key: ValueKey(tab.label));
+                        case kTabLabelSettingPage:
+                          return DesktopSettingPage(key: ValueKey(tab.label));
+                        default:
+                          return Container();
+                      }
+                    }).toList()),
+              ))),
+        ],
+      ),
+    );
+  }
+
+  void onTabClose(String label) {
+    DesktopTabBar.onClose(this, tabController, tabs, label);
+  }
+
+  void onAddSetting() {
+    DesktopTabBar.onAdd(this, tabController, tabs, _selected,
+        TabInfo(label: kTabLabelSettingPage, icon: Icons.settings));
+  }
+}

flutter/lib/desktop/pages/file_manager_page.dart

@@ -73,7 +73,6 @@ class _FileManagerPageState extends State<FileManagerPage>
                 return false;
               },
               child: Scaffold(
-                backgroundColor: isDarkTheme() ? MyTheme.dark : MyTheme.grayBg,
                 body: Row(
                   children: [
                     Flexible(flex: 3, child: body(isLocal: true)),

flutter/lib/desktop/pages/file_manager_tab_page.dart

@@ -1,5 +1,4 @@
 import 'dart:convert';
-import 'dart:math';
 
 import 'package:desktop_multi_window/desktop_multi_window.dart';
 import 'package:flutter/material.dart';
@@ -9,7 +8,6 @@ import 'package:flutter_hbb/desktop/widgets/tabbar_widget.dart';
 import 'package:flutter_hbb/models/model.dart';
 import 'package:flutter_hbb/utils/multi_window_manager.dart';
 import 'package:get/get.dart';
-import 'package:window_manager/window_manager.dart';
 
 /// File Transfer for multi tabs
 class FileManagerTabPage extends StatefulWidget {
@@ -25,22 +23,21 @@ class _FileManagerTabPageState extends State<FileManagerTabPage>
     with TickerProviderStateMixin {
   // refactor List<int> when using multi-tab
   // this singleton is only for test
-  var connectionIds = List<String>.empty(growable: true).obs;
+  RxList<TabInfo> tabs = List<TabInfo>.empty(growable: true).obs;
-  var initialIndex = 0;
   late Rx<TabController> tabController;
   static final Rx<int> _selected = 0.obs;
+  IconData icon = Icons.file_copy_sharp;
 
   _FileManagerTabPageState(Map<String, dynamic> params) {
     if (params['id'] != null) {
-      connectionIds.add(params['id']);
+      tabs.add(TabInfo(label: params['id'], icon: icon));
     }
   }
 
   @override
   void initState() {
     super.initState();
-    tabController =
+    tabController = TabController(length: tabs.length, vsync: this).obs;
-        TabController(length: connectionIds.length, vsync: this).obs;
     rustDeskWinManager.setMethodHandler((call, fromWindowId) async {
       print(
           "call ${call.method} with args ${call.arguments} from window ${fromWindowId}");
@@ -49,23 +46,13 @@ class _FileManagerTabPageState extends State<FileManagerTabPage>
         final args = jsonDecode(call.arguments);
         final id = args['id'];
         window_on_top(windowId());
-        final indexOf = connectionIds.indexOf(id);
+        DesktopTabBar.onAdd(this, tabController, tabs, _selected,
-        if (indexOf >= 0) {
+            TabInfo(label: id, icon: icon));
-          initialIndex = indexOf;
-          tabController.value.animateTo(initialIndex, duration: Duration.zero);
-        } else {
-          connectionIds.add(id);
-          initialIndex = connectionIds.length - 1;
-          tabController.value = TabController(
-              length: connectionIds.length,
-              initialIndex: initialIndex,
-              vsync: this);
-        }
-        _selected.value = initialIndex;
       } else if (call.method == "onDestroy") {
-        print("executing onDestroy hook, closing ${connectionIds}");
+        print(
-        connectionIds.forEach((id) {
+            "executing onDestroy hook, closing ${tabs.map((tab) => tab.label).toList()}");
-          final tag = 'ft_${id}';
+        tabs.forEach((tab) {
+          final tag = 'ft_${tab.label}';
           ffi(tag).close().then((_) {
             Get.delete<FFI>(tag: tag);
           });
@@ -80,23 +67,22 @@ class _FileManagerTabPageState extends State<FileManagerTabPage>
     return Scaffold(
       body: Column(
         children: [
-          Obx(
+          DesktopTabBar(
-            () => DesktopTabBar(
             controller: tabController,
-              tabs: connectionIds.toList(),
+            tabs: tabs,
             onTabClose: onRemoveId,
-              tabIcon: Icons.file_copy_sharp,
             selected: _selected,
-            ),
+            dark: isDarkTheme(),
+            mainTab: false,
           ),
           Expanded(
             child: Obx(
               () => TabBarView(
                   controller: tabController.value,
-                  children: connectionIds
+                  children: tabs
-                      .map((e) => FileManagerPage(
+                      .map((tab) => FileManagerPage(
-                          key: ValueKey(e),
+                          key: ValueKey(tab.label),
-                          id: e)) //RemotePage(key: ValueKey(e), id: e))
+                          id: tab.label)) //RemotePage(key: ValueKey(e), id: e))
                       .toList()),
             ),
           )
@@ -106,15 +92,8 @@ class _FileManagerTabPageState extends State<FileManagerTabPage>
   }
 
   void onRemoveId(String id) {
-    final indexOf = connectionIds.indexOf(id);
+    DesktopTabBar.onClose(this, tabController, tabs, id);
-    if (indexOf == -1) {
+    if (tabs.length == 0) {
-      return;
-    }
-    connectionIds.removeAt(indexOf);
-    initialIndex = max(0, initialIndex - 1);
-    tabController.value = TabController(
-        length: connectionIds.length, initialIndex: initialIndex, vsync: this);
-    if (connectionIds.length == 0) {
       WindowController.fromWindowId(windowId()).close();
     }
   }

flutter/lib/desktop/pages/remote_page.dart

@@ -263,7 +263,6 @@ class _RemotePageState extends State<RemotePage>
             OverlayEntry(builder: (context) {
               _ffi.chatModel.setOverlayState(Overlay.of(context));
               return Container(
-                  color: Colors.black,
                   child: getRawPointerAndKeyBody(getBodyForDesktop(keyboard)));
             })
           ],
@@ -500,19 +499,14 @@ class _RemotePageState extends State<RemotePage>
 
   Widget getBodyForDesktop(bool keyboard) {
     var paints = <Widget>[
-      MouseRegion(
+      MouseRegion(onEnter: (evt) {
-          onEnter: (evt) {
         bind.hostStopSystemKeyPropagate(stopped: false);
-          },
+      }, onExit: (evt) {
-          onExit: (evt) {
         bind.hostStopSystemKeyPropagate(stopped: true);
-          },
+      }, child: Container(
-          child: Container(
-            color: MyTheme.canvasColor,
         child: LayoutBuilder(builder: (context, constraints) {
           Future.delayed(Duration.zero, () {
-                Provider.of<CanvasModel>(context, listen: false)
+            Provider.of<CanvasModel>(context, listen: false).updateViewStyle();
-                    .updateViewStyle();
           });
           return ImagePaint(
             id: widget.id,

flutter/lib/desktop/screen/desktop_file_transfer_screen.dart

@@ -20,27 +20,11 @@ class DesktopFileTransferScreen extends StatelessWidget {
         ChangeNotifierProvider.value(value: gFFI.cursorModel),
         ChangeNotifierProvider.value(value: gFFI.canvasModel),
       ],
-      child: MaterialApp(
+      child: Scaffold(
-          navigatorKey: globalKey,
+        body: FileManagerTabPage(
-          debugShowCheckedModeBanner: false,
-          title: 'RustDesk - File Transfer',
-          theme: ThemeData(
-            primarySwatch: Colors.blue,
-            visualDensity: VisualDensity.adaptivePlatformDensity,
-          ),
-          home: FileManagerTabPage(
           params: params,
         ),
-          navigatorObservers: [
+      ),
-            // FirebaseAnalyticsObserver(analytics: analytics),
-            FlutterSmartDialog.observer
-          ],
-          builder: FlutterSmartDialog.init(
-              builder: isAndroid
-                  ? (_, child) => AccessibilityListener(
-                        child: child,
-                      )
-                  : null)),
     );
   }
 }

flutter/lib/desktop/screen/desktop_remote_screen.dart

@@ -19,27 +19,10 @@ class DesktopRemoteScreen extends StatelessWidget {
           ChangeNotifierProvider.value(value: gFFI.cursorModel),
           ChangeNotifierProvider.value(value: gFFI.canvasModel),
         ],
-      child: MaterialApp(
+        child: Scaffold(
-          navigatorKey: globalKey,
+          body: ConnectionTabPage(
-          debugShowCheckedModeBanner: false,
-          title: 'RustDesk - Remote Desktop',
-          theme: ThemeData(
-            primarySwatch: Colors.blue,
-            visualDensity: VisualDensity.adaptivePlatformDensity,
-          ),
-          home: ConnectionTabPage(
             params: params,
           ),
-          navigatorObservers: [
+        ));
-            // FirebaseAnalyticsObserver(analytics: analytics),
-            FlutterSmartDialog.observer
-          ],
-          builder: FlutterSmartDialog.init(
-              builder: isAndroid
-                  ? (_, child) => AccessibilityListener(
-                        child: child,
-                      )
-                  : null)),
-    );
   }
 }

flutter/lib/desktop/widgets/tabbar_widget.dart

@@ -6,127 +6,183 @@ import 'package:flutter_hbb/consts.dart';
 import 'package:flutter_hbb/utils/multi_window_manager.dart';
 import 'package:get/get.dart';
 
-const Color _bgColor = Color.fromARGB(255, 231, 234, 237);
-const Color _tabUnselectedColor = Color.fromARGB(255, 240, 240, 240);
-const Color _tabHoverColor = Color.fromARGB(255, 245, 245, 245);
-const Color _tabSelectedColor = Color.fromARGB(255, 255, 255, 255);
-const Color _tabIconColor = MyTheme.accent50;
-const Color _tabindicatorColor = _tabIconColor;
-const Color _textColor = Color.fromARGB(255, 108, 111, 145);
-const Color _iconColor = Color.fromARGB(255, 102, 106, 109);
-const Color _iconHoverColor = Colors.black12;
-const Color _iconPressedColor = Colors.black26;
-const Color _dividerColor = Colors.black12;
-
 const double _kTabBarHeight = kDesktopRemoteTabBarHeight;
 const double _kTabFixedWidth = 150;
 const double _kIconSize = 18;
 const double _kDividerIndent = 10;
 const double _kAddIconSize = _kTabBarHeight - 15;
 
+class TabInfo {
+  late final String label;
+  late final IconData icon;
+  late final bool closable;
+
+  TabInfo({required this.label, required this.icon, this.closable = true});
+}
+
 class DesktopTabBar extends StatelessWidget {
   late final Rx<TabController> controller;
-  late final List<String> tabs;
+  late final RxList<TabInfo> tabs;
   late final Function(String) onTabClose;
-  late final IconData tabIcon;
   late final Rx<int> selected;
+  late final bool dark;
+  late final _Theme _theme;
+  late final bool mainTab;
+  late final Function()? onAddSetting;
 
-  DesktopTabBar(
+  DesktopTabBar({
-      {Key? key,
+    Key? key,
     required this.controller,
     required this.tabs,
     required this.onTabClose,
-      required this.tabIcon,
+    required this.selected,
-      required this.selected})
+    required this.dark,
-      : super(key: key);
+    required this.mainTab,
+    this.onAddSetting,
+  })  : _theme = dark ? _Theme.dark() : _Theme.light(),
+        super(key: key);
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      color: _bgColor,
       height: _kTabBarHeight,
       child: Row(
         children: [
+          Expanded(
+            child: Row(
+              children: [
+                Offstage(
+                  offstage: !mainTab,
+                  child: Row(children: [
+                    Image.asset('assets/logo.ico'),
+                    Text("RustDesk"),
+                  ]).paddingSymmetric(horizontal: 12, vertical: 5),
+                ),
                 Flexible(
                   child: Obx(() => TabBar(
-                indicatorColor: _tabindicatorColor,
+                      indicator: BoxDecoration(),
-                indicatorSize: TabBarIndicatorSize.tab,
+                      indicatorColor: Colors.transparent,
-                indicatorWeight: 4,
+                      labelPadding: const EdgeInsets.symmetric(
-                labelPadding:
+                          vertical: 0, horizontal: 0),
-                    const EdgeInsets.symmetric(vertical: 0, horizontal: 0),
-                indicatorPadding: EdgeInsets.zero,
                       isScrollable: true,
+                      indicatorWeight: 0.1,
                       physics: BouncingScrollPhysics(),
                       controller: controller.value,
-                tabs: tabs
+                      tabs: tabs.asMap().entries.map((e) {
-                    .asMap()
+                        int index = e.key;
-                    .entries
+                        String label = e.value.label;
-                    .map((e) => _Tab(
+
-                          index: e.key,
+                        return _Tab(
-                          text: e.value,
+                          index: index,
-                          icon: tabIcon,
+                          label: label,
+                          icon: e.value.icon,
+                          closable: e.value.closable,
                           selected: selected.value,
                           onClose: () {
-                            onTabClose(e.value);
+                            onTabClose(label);
-                            // TODO
+                            if (index <= selected.value) {
-                            if (e.key <= selected.value) {
                               selected.value = max(0, selected.value - 1);
                             }
-                            controller.value.animateTo(selected.value);
+                            controller.value.animateTo(selected.value,
+                                duration: Duration.zero);
                           },
                           onSelected: () {
-                            selected.value = e.key;
+                            selected.value = index;
-                            controller.value.animateTo(e.key);
+                            controller.value
+                                .animateTo(index, duration: Duration.zero);
                           },
-                        ))
+                          theme: _theme,
-                    .toList())),
+                        );
+                      }).toList())),
                 ),
-          Padding(
+                Offstage(
-            padding: EdgeInsets.only(left: 10),
+                  offstage: mainTab,
-            child: _AddButton(),
+                  child: _AddButton(
+                    theme: _theme,
+                  ).paddingOnly(left: 10),
+                )
+              ],
             ),
+          ),
+          Offstage(
+            offstage: onAddSetting == null,
+            child: Tooltip(
+              message: translate("Settings"),
+              child: InkWell(
+                child: Icon(
+                  Icons.menu,
+                  color: _theme.unSelectedIconColor,
+                ),
+                onTap: () => onAddSetting?.call(),
+              ).paddingOnly(right: 10),
+            ),
+          )
         ],
       ),
     );
   }
+
+  static onClose(
+    TickerProvider vsync,
+    Rx<TabController> controller,
+    RxList<TabInfo> tabs,
+    String label,
+  ) {
+    tabs.removeWhere((tab) => tab.label == label);
+    controller.value = TabController(
+        length: tabs.length,
+        vsync: vsync,
+        initialIndex: max(0, tabs.length - 1));
+  }
+
+  static onAdd(TickerProvider vsync, Rx<TabController> controller,
+      RxList<TabInfo> tabs, Rx<int> selected, TabInfo tab) {
+    int index = tabs.indexWhere((e) => e.label == tab.label);
+    if (index >= 0) {
+      controller.value.animateTo(index, duration: Duration.zero);
+      selected.value = index;
+    } else {
+      tabs.add(tab);
+      controller.value = TabController(
+          length: tabs.length, vsync: vsync, initialIndex: tabs.length - 1);
+      controller.value.animateTo(tabs.length - 1, duration: Duration.zero);
+      selected.value = tabs.length - 1;
+    }
+  }
 }
 
 class _Tab extends StatelessWidget {
   late final int index;
-  late final String text;
+  late final String label;
   late final IconData icon;
+  late final bool closable;
   late final int selected;
   late final Function() onClose;
   late final Function() onSelected;
   final RxBool _hover = false.obs;
+  late final _Theme theme;
 
-  _Tab({
+  _Tab(
-    Key? key,
+      {Key? key,
       required this.index,
-    required this.text,
+      required this.label,
       required this.icon,
+      required this.closable,
       required this.selected,
       required this.onClose,
       required this.onSelected,
-  }) : super(key: key);
+      required this.theme})
+      : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     bool is_selected = index == selected;
     bool show_divider = index != selected - 1 && index != selected;
-    return Obx(
+    return Ink(
-      (() => _Hoverable(
-            onHover: (hover) => _hover.value = hover,
-            onTapUp: () => onSelected(),
-            child: Container(
       width: _kTabFixedWidth,
-              decoration: BoxDecoration(
+      child: InkWell(
-                color: is_selected
+        onHover: (hover) => _hover.value = hover,
-                    ? _tabSelectedColor
+        onTap: () => onSelected(),
-                    : _hover.value
-                        ? _tabHoverColor
-                        : _tabUnselectedColor,
-              ),
         child: Row(
           children: [
             Expanded(
@@ -135,146 +191,134 @@ class _Tab extends StatelessWidget {
                   child: Row(
                       crossAxisAlignment: CrossAxisAlignment.center,
                       children: [
-                              Padding(
+                        Icon(
-                                padding: EdgeInsets.symmetric(horizontal: 5),
-                                child: Icon(
                           icon,
                           size: _kIconSize,
-                                  color: _tabIconColor,
+                          color: is_selected
-                                ),
+                              ? theme.selectedtabIconColor
-                              ),
+                              : theme.unSelectedtabIconColor,
+                        ).paddingSymmetric(horizontal: 5),
                         Expanded(
                           child: Text(
-                                  text,
+                            translate(label),
-                                  style: const TextStyle(color: _textColor),
+                            style: TextStyle(
+                                color: is_selected
+                                    ? theme.selectedTextColor
+                                    : theme.unSelectedTextColor),
                           ),
                         ),
-                              _CloseButton(
+                        Obx((() => _CloseButton(
-                                tabHovered: _hover.value,
+                              visiable: _hover.value && closable,
+                              tabSelected: is_selected,
                               onClose: () => onClose(),
-                              ),
+                              theme: theme,
+                            ))),
                       ])),
             ),
-                  show_divider
+            Offstage(
-                      ? VerticalDivider(
+              offstage: !show_divider,
+              child: VerticalDivider(
                 width: 1,
                 indent: _kDividerIndent,
                 endIndent: _kDividerIndent,
-                          color: _dividerColor,
+                color: theme.dividerColor,
                 thickness: 1,
+              ),
             )
-                      : Container(),
           ],
         ),
       ),
-          )),
     );
   }
 }
 
 class _AddButton extends StatelessWidget {
-  final RxBool _hover = false.obs;
+  late final _Theme theme;
-  final RxBool _pressed = false.obs;
 
   _AddButton({
     Key? key,
+    required this.theme,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return _Hoverable(
+    return Ink(
-      onHover: (hover) => _hover.value = hover,
-      onPressed: (pressed) => _pressed.value = pressed,
-      onTapUp: () =>
-          rustDeskWinManager.call(WindowType.Main, "main_window_on_top", ""),
-      child: Obx((() => Container(
       height: _kTabBarHeight,
-            decoration: ShapeDecoration(
+      child: InkWell(
-              shape: const CircleBorder(),
+        customBorder: const CircleBorder(),
-              color: _pressed.value
+        onTap: () =>
-                  ? _iconPressedColor
+            rustDeskWinManager.call(WindowType.Main, "main_window_on_top", ""),
-                  : _hover.value
+        child: Icon(
-                      ? _iconHoverColor
-                      : Colors.transparent,
-            ),
-            child: const Icon(
           Icons.add_sharp,
-              color: _iconColor,
           size: _kAddIconSize,
+          color: theme.unSelectedIconColor,
+        ),
       ),
-          ))),
     );
   }
 }
 
 class _CloseButton extends StatelessWidget {
-  final bool tabHovered;
+  final bool visiable;
+  final bool tabSelected;
   final Function onClose;
-  final RxBool _hover = false.obs;
+  late final _Theme theme;
-  final RxBool _pressed = false.obs;
 
   _CloseButton({
     Key? key,
-    required this.tabHovered,
+    required this.visiable,
+    required this.tabSelected,
     required this.onClose,
+    required this.theme,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
+    return SizedBox(
-        padding: const EdgeInsets.symmetric(horizontal: 5),
-        child: SizedBox(
         width: _kIconSize,
-          child: tabHovered
+        child: Offstage(
-              ? Obx((() => _Hoverable(
+          offstage: !visiable,
-                    onHover: (hover) => _hover.value = hover,
+          child: InkWell(
-                    onPressed: (pressed) => _pressed.value = pressed,
+            customBorder: RoundedRectangleBorder(),
-                    onTapUp: () => onClose(),
+            onTap: () => onClose(),
-                    child: Container(
+            child: Icon(
-                        color: _pressed.value
-                            ? _iconPressedColor
-                            : _hover.value
-                                ? _iconHoverColor
-                                : Colors.transparent,
-                        child: const Icon(
               Icons.close,
               size: _kIconSize,
-                          color: _iconColor,
+              color: tabSelected
-                        )),
+                  ? theme.selectedIconColor
-                  )))
+                  : theme.unSelectedIconColor,
-              : Container(),
+            ),
-        ));
+          ),
+        )).paddingSymmetric(horizontal: 5);
   }
 }
 
-class _Hoverable extends StatelessWidget {
+class _Theme {
-  final Widget child;
+  late Color unSelectedtabIconColor;
-  final Function(bool hover) onHover;
+  late Color selectedtabIconColor;
-  final Function(bool pressed)? onPressed;
+  late Color selectedTextColor;
-  final Function()? onTapUp;
+  late Color unSelectedTextColor;
+  late Color selectedIconColor;
+  late Color unSelectedIconColor;
+  late Color dividerColor;
 
-  const _Hoverable(
+  _Theme.light() {
-      {Key? key,
+    unSelectedtabIconColor = Color.fromARGB(255, 162, 203, 241);
-      required this.child,
+    selectedtabIconColor = MyTheme.accent;
-      required this.onHover,
+    selectedTextColor = Color.fromARGB(255, 26, 26, 26);
-      this.onPressed,
+    unSelectedTextColor = Color.fromARGB(255, 96, 96, 96);
-      this.onTapUp})
+    selectedIconColor = Color.fromARGB(255, 26, 26, 26);
-      : super(key: key);
+    unSelectedIconColor = Color.fromARGB(255, 96, 96, 96);
+    dividerColor = Color.fromARGB(255, 238, 238, 238);
+  }
 
-  @override
+  _Theme.dark() {
-  Widget build(BuildContext context) {
+    unSelectedtabIconColor = Color.fromARGB(255, 30, 65, 98);
-    return MouseRegion(
+    selectedtabIconColor = MyTheme.accent;
-        onEnter: (_) => onHover(true),
+    selectedTextColor = Color.fromARGB(255, 255, 255, 255);
-        onExit: (_) => onHover(false),
+    unSelectedTextColor = Color.fromARGB(255, 207, 207, 207);
-        child: onPressed == null && onTapUp == null
+    selectedIconColor = Color.fromARGB(255, 215, 215, 215);
-            ? child
+    unSelectedIconColor = Color.fromARGB(255, 255, 255, 255);
-            : GestureDetector(
+    dividerColor = Color.fromARGB(255, 64, 64, 64);
-                onTapDown: (details) => onPressed?.call(true),
-                onTapUp: (details) {
-                  onPressed?.call(false);
-                  onTapUp?.call();
-                },
-                child: child,
-              ));
   }
 }

flutter/lib/main.dart

@@ -1,7 +1,7 @@
 import 'dart:convert';
 
 import 'package:flutter/material.dart';
-import 'package:flutter_hbb/desktop/pages/desktop_home_page.dart';
+import 'package:flutter_hbb/desktop/pages/desktop_tab_page.dart';
 import 'package:flutter_hbb/desktop/screen/desktop_file_transfer_screen.dart';
 import 'package:flutter_hbb/desktop/screen/desktop_remote_screen.dart';
 import 'package:flutter_hbb/utils/multi_window_manager.dart';
@@ -86,18 +86,44 @@ void runMainApp(bool startService) async {
 void runRemoteScreen(Map<String, dynamic> argument) async {
   await initEnv(kAppTypeDesktopRemote);
   runApp(GetMaterialApp(
+    navigatorKey: globalKey,
+    debugShowCheckedModeBanner: false,
+    title: 'RustDesk - Remote Desktop',
     theme: getCurrentTheme(),
     home: DesktopRemoteScreen(
       params: argument,
     ),
+    navigatorObservers: [
+      // FirebaseAnalyticsObserver(analytics: analytics),
+      FlutterSmartDialog.observer
+    ],
+    builder: FlutterSmartDialog.init(
+        builder: isAndroid
+            ? (_, child) => AccessibilityListener(
+                  child: child,
+                )
+            : null),
   ));
 }
 
 void runFileTransferScreen(Map<String, dynamic> argument) async {
   await initEnv(kAppTypeDesktopFileTransfer);
   runApp(GetMaterialApp(
+      navigatorKey: globalKey,
+      debugShowCheckedModeBanner: false,
+      title: 'RustDesk - File Transfer',
       theme: getCurrentTheme(),
-      home: DesktopFileTransferScreen(params: argument)));
+      home: DesktopFileTransferScreen(params: argument),
+      navigatorObservers: [
+        // FirebaseAnalyticsObserver(analytics: analytics),
+        FlutterSmartDialog.observer
+      ],
+      builder: FlutterSmartDialog.init(
+          builder: isAndroid
+              ? (_, child) => AccessibilityListener(
+                    child: child,
+                  )
+              : null)));
 }
 
 class App extends StatelessWidget {
@@ -121,7 +147,7 @@ class App extends StatelessWidget {
           title: 'RustDesk',
           theme: getCurrentTheme(),
           home: isDesktop
-              ? DesktopHomePage()
+              ? DesktopTabPage()
               : !isAndroid
                   ? WebHomePage()
                   : HomePage(),