登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

豆瓜网 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›Flutter3-MacOS桌面OS系统|flutter3.32+window_manager ...

Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板

博咱 2025-8-2 10:34:13
原创flutter3.32+dart3.8+window_manager桌面OS解决方案Flutter3MacOS。
flutter3_macos最新研发flutter3.32+dart3.8+getx+window_manager+reorderables客户端os管理系统模板。支持macOS和windows两种桌面布局风格、毛玻璃虚化背景、桌面栅格布局模板、Dock菜单可拖拽排序、自定义JSON配置桌面/dock菜单。
1.png

技术栈


  • 编辑器：VScode
  • 框架技术：Flutter3.32+Dart3.8
  • 窗口管理：window_manager^0.5.1
  • 路由/状态管理：get^4.7.2
  • 缓存服务：get_storage^2.1.1
  • 拖拽排序：reorderables^0.6.0
  • 图表组件：fl_chart^1.0.0
  • 托盘管理：system_tray^2.0.3
  • 日历插件：syncfusion_flutter_calendar^30.1.42
2.gif

3.gif

项目特性


  • 支持macos/windows两种桌面风格
  • 经典程序坞Dock菜单(可拖拽排序/二级菜单)
  • 支持自定义json配置桌面菜单和Dock菜单
  • 自研桌面栅格化布局模板
  • 自定义桌面个性化壁纸、全场景毛玻璃虚化UI质感
  • 支持自定义弹窗加载页面组件(支持全屏/拖拽/缩放)
4.gif

项目结构目录

flutter-macos使用最新版跨平台框架 flutter3.32+dart3.8 搭建项目模板。
5.png

6.png

flutter3-macOS已经同步到我的原创作品集，有需要的可以去下载使用。

flutter3.32+window_manager桌面端OS管理系统
项目入口文件main.dart
  1. import 'dart:io';
  2. import 'package:flutter/material.dart';
  3. import 'package:get/get.dart';
  4. import 'package:get_storage/get_storage.dart';
  5. import 'package:intl/date_symbol_data_local.dart';
  6. import 'package:system_tray/system_tray.dart';
  7. import 'package:window_manager/window_manager.dart';
  9. import 'utils/common.dart';
  11. // 引入布局模板
  12. import 'layouts/desktop.dart';
  14. // 引入路由管理
  15. import 'router/index.dart';
  17. void main() async {
  18.   // 初始化国际化语言
  19.   initializeDateFormatting();
  21.   // 初始化get_storage本地存储
  22.   await GetStorage.init();
  24.   // 初始化window_manager窗口
  25.   WidgetsFlutterBinding.ensureInitialized();
  26.   await windowManager.ensureInitialized();
  27.   WindowOptions windowOptions = const WindowOptions(
  28.     title: 'Flutter-MacOS',
  29.     size: Size(1000, 640),
  30.     center: true,
  31.     backgroundColor: Colors.transparent,
  32.     skipTaskbar: false,
  33.     titleBarStyle: TitleBarStyle.hidden, // 是否隐藏系统导航栏
  34.     windowButtonVisibility: false,
  35.   );
  36.   windowManager.waitUntilReadyToShow(windowOptions, () async {
  37.     windowManager.setAsFrameless(); // 无边框
  38.     windowManager.setHasShadow(true); // 是否有阴影
  39.     await windowManager.show();
  40.     await windowManager.focus();
  41.   });
  43.   await initSystemTray();
  45.   runApp(const MyApp());
  46. }
  48. // 初始化系统托盘图标
  49. Future<void> initSystemTray() async {
  50.   String trayIco = 'assets/images/tray.ico';
  51.   SystemTray systemTray = SystemTray();
  53.   // 初始化系统托盘
  54.   await systemTray.initSystemTray(
  55.     title: 'Flutter-MacOS',
  56.     iconPath: trayIco,
  57.   );
  59.   // 右键菜单
  60.   final Menu menu = Menu();
  61.   await menu.buildFrom([
  62.     MenuItemLabel(label: '打开主界面', image: 'assets/images/tray_main.bmp', onClicked: (menuItem) async => await windowManager.show()),
  63.     MenuItemLabel(label: '隐藏窗口', image: 'assets/images/tray_hide.bmp', onClicked: (menuItem) async => await windowManager.hide()),
  64.     MenuItemLabel(label: '设置中心', image: 'assets/images/tray_setting.bmp', onClicked: (menuItem) => {}),
  65.     MenuItemLabel(label: '锁屏', image: 'assets/images/tray_lock.bmp', onClicked: (menuItem) => {}),
  66.     MenuItemLabel(label: '退出', image: 'assets/images/tray_logout.bmp', onClicked: (menuItem) async => await windowManager.destroy()),
  67.   ]);
  68.   await systemTray.setContextMenu(menu);
  70.   // 右键事件
  71.   systemTray.registerSystemTrayEventHandler((eventName) async {
  72.     debugPrint('eventName: $eventName');
  73.     if (eventName == kSystemTrayEventClick) {
  74.       Platform.isWindows ? await windowManager.show() : systemTray.popUpContextMenu();
  75.     } else if (eventName == kSystemTrayEventRightClick) {
  76.       Platform.isWindows ? systemTray.popUpContextMenu() : await windowManager.show();
  77.     }
  78.   });
  79. }
  81. class MyApp extends StatelessWidget {
  82.   const MyApp({super.key});
  84.   @override
  85.   Widget build(BuildContext context) {
  86.     return GetMaterialApp(
  87.       title: 'FLUTTER3 MACOS',
  88.       debugShowCheckedModeBanner: false,
  89.       // 配置主题
  90.       theme: ThemeData(
  91.         colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
  92.         useMaterial3: true,
  93.         // 修复windows端字体粗细不一致
  94.         fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null,
  95.       ),
  96.       home: const Desktop(),
  97.       // 初始路由
  98.       initialRoute: Common.isLogin() ? '/' : '/login',
  99.       // 路由页面
  100.       getPages: routePages,
  101.     );
  102.   }
  103. }
复制代码
7.png

8.png

flutter-macos桌面布局模板

项目内置了macos+windows两种风格桌面布局模板。
9.png

10.png
  1. return Scaffold(
  2.   key: scaffoldKey,
  3.   body: Obx(() {
  4.     return Container(
  5.       // 背景图主题
  6.       decoration: skinController.skinUrl.isNotEmpty ? BoxDecoration(
  7.         image: DecorationImage(
  8.           image: AssetImage('${skinController.skinUrl}'),
  9.           fit: BoxFit.cover,
  10.         ),
  11.       )
  12.       :
  13.       // 默认渐变色
  14.       BoxDecoration(
  15.         gradient: LinearGradient(
  16.           begin: Alignment.topLeft,
  17.           end: Alignment.bottomRight,
  18.           colors: [Color(0xFF454ED4), Color(0xFFBC40D4)],
  19.         ),
  20.       ),
  21.       child: DragToResizeArea(
  22.         child: Flex(
  23.           direction: Axis.vertical,
  24.           crossAxisAlignment: CrossAxisAlignment.start,
  25.           children: [
  26.             // 顶部模块
  27.             widget.header ?? WindowTitlebar(
  28.               onDrawer: () {
  29.                 scaffoldKey.currentState?.openEndDrawer();
  30.               },
  31.             ),
  33.             // 桌面模块
  34.             Expanded(
  35.               child: widget.body ?? Container(),
  36.             ),
  38.             // 底部模块
  39.             Container(
  40.               child: widget.footer,
  41.             ),
  42.           ],
  43.         ),
  44.       ),
  45.     );
  46.   }),
  47. );
复制代码
11.png

12.png

桌面布局模板
  1. class _DesktopState extends State<Desktop> {
  2.   SettingController settingController = Get.put(SettingController());
  4.   @override
  5.   Widget build(BuildContext context) {
  6.     return Obx(() {
  7.       final layout = settingController.settingData['dock'];
  8.       return Layout(
  9.         // 桌面菜单
  10.         body: layout == 'macos' ? MacDesktop() : WindowDesktop(),
  11.         // 底部导航
  12.         footer: layout == 'macos' ? MacDock() : WindowDock(),
  13.       );
  14.     });
  15.   }
  16. }
复制代码
13.png

14.png

15.png

16.png

17.png

18.png

19.png

20.png

21.png

22.png

23.png

24.png

25.png

26.png

27.png

桌面菜单JSON配置参数
  1. /**
  2.   * ================== 桌面OS菜单配置 ==================
  3.   * [label]  图标标题
  4.   * [imgico] 图标(本地或网络图片) 支持Icon图标、自定义组件、svg/png...类型
  5.   * [path]   跳转路由页面
  6.   * [link]   跳转外部链接
  7.   * [hideLabel]  是否隐藏图标标题
  8.   * [background] 自定义图标背景色
  9.   * [size] 栅格磁贴布局(1x1 ... 12x12)
  10.   * [onClick]  点击图标回调函数
  11.   * children 二级菜单
  12.   */
复制代码
28.png

29.png

桌面菜单JSON配置片段
  1. late List deskMenus = [
  2.   {
  3.     'uid': '6c84fb90-12c4-11e1-840d-7b25c5ee775a',
  4.     'label': '主页',
  5.     'list': [
  6.       {'label': '今日', 'imgico': const Today(), 'hideLabel': true, 'size': '3x2'},
  7.       {'label': '日历', 'imgico': const Calendar2x2(), 'size': '2x2'},
  8.       {
  9.         'label': '便签', 'imgico': const Notebook(), 'size': '3x2',
  10.         'onClick': () => {
  11.           navigator?.push(FdialogRoute(
  12.             child: Fdialog(
  13.               title: Text('便签'),
  14.               content: Center(
  15.                 child: Column(
  16.                   mainAxisAlignment: MainAxisAlignment.center,
  17.                   children: [
  18.                     Icon(Icons.turned_in_not_rounded, color: Colors.black26, size: 40.0,),
  19.                     Text('自定义便签', style: TextStyle(color: Colors.black38),)
  20.                   ],
  21.                 )
  22.               ),
  23.               width: 375,
  24.               height: 400,
  25.               maximizable: true,
  26.               resizeable: true,
  27.             ),
  28.           ))
  29.         }
  30.       },
  31.       {'label': '备忘录', 'imgico': const Note(), 'size': '2x2'},
  32.       {'label': '倒计时', 'imgico': const Countdown(), 'size': '2x2'},
  34.       // ...
  35.     ]
  36.   },
  37.   // ...
  38.   {
  39.     'uid': '9a16fb90-12c4-11e1-840d-7b25c5ee775a',
  40.     'label': '摸鱼',
  41.     'list': [
  42.       {'label': 'Flutter3.32', 'imgico': 'assets/images/logo.png', 'link': 'https://flutter.dev/', 'background': Color(0xFFEAFAFF), 'size': '2x2'},
  43.       {'label': 'Github', 'imgico': 'assets/images/svg/github.svg', 'link': 'https://github.com/', 'background': Color(0xff607d8b),},
  44.       {'label': '掘金', 'imgico': 'assets/images/svg/juejin.svg', 'link': 'https://juejin.cn/', 'background': Color(0xff0984fe), 'size': '1x2'},
  45.       {'label': '哔哩哔哩', 'imgico': 'assets/images/svg/bilibili.svg', 'link': 'https://www.bilibili.com/', 'background': Color(0xfffe65a6), 'size': '3x2'},
  46.       // ...
  47.     ]
  48.   },
  49.   {
  50.     'uid': 'u738f210-807e-1e4e-1550-4deefac27e48',
  51.     'label': 'AI',
  52.     'list': [
  53.       {'label': 'DeepSeek', 'imgico': 'https://www.faxianai.com/wp-content/uploads/2025/02/20250205134524-1febd.png', 'link': 'https://chat.deepseek.com/', 'hideLabel': true, 'background': Color(0xffffffff), 'size': '3x2'},
  54.       {'label': '腾讯元宝', 'imgico': 'https://www.faxianai.com/wp-content/uploads/2025/02/20250224143149-7fe1f.png', 'link': 'https://yuanbao.tencent.com/', 'background': Color(0xffffffff), 'size': '2x2'},
  55.       // ...
  56.     ]
  57.   },
  58.   {
  59.     'uid': '3u85fb90-12c4-11e1-840d-7b25c5ee775a',
  60.     'label': '工作台',
  61.     'list': [
  62.       {'label': 'Flutter\n3.22', 'imgico': Padding(padding: EdgeInsets.all(5.0), child: Image.asset('assets/images/logo.png'),), 'link': 'https://flutter.dev/', 'background': Color(0xffffffff), 'size': '2x1'},
  63.       {'label': 'Dart中文官方文档', 'imgico': 'assets/images/dart.png', 'link': 'https://dart.cn/'},
  64.       {'label': '日历', 'imgico': const Calendar1x1(), 'background': const Color(0xffffffff),},
  65.       {'label': '首页', 'imgico': const Icon(Icons.home_outlined), 'path': '/home'},
  66.       {'label': '工作台', 'imgico': const Icon(Icons.poll_outlined), 'path': '/dashboard'},
  67.       {
  68.         'label': '组件',
  69.         'children': [
  70.           {'label': '组件', 'imgico': 'assets/images/svg/component.svg', 'path': '/component'},
  71.           {'label': '表单管理', 'imgico': 'assets/images/svg/form.svg', 'path': '/form'},
  72.           {'label': '表格', 'imgico': 'assets/images/svg/table.svg', 'path': '/table'},
  73.           {'label': '订单', 'imgico': 'assets/images/svg/order.svg', 'path': '/order'},
  74.           {'label': 'Editor', 'imgico': 'assets/images/svg/editor.svg', 'path': '/editor'},
  75.         ]
  76.       },
  77.       {
  78.         'label': '管理中心',
  79.         'children': [
  80.           {
  81.             'label': '个人空间', 'imgico': 'assets/images/svg/my.svg',
  82.             'onClick': () => {
  83.               // ...
  84.             }
  85.           },
  86.           {'label': '用户管理', 'imgico': 'assets/images/svg/user.svg', 'path': '/user'},
  87.           {'label': '权限设置', 'imgico': 'assets/images/svg/role.svg', 'path': '/role'},
  88.           {'label': '日志', 'imgico': 'assets/images/svg/logs.svg', 'path': '/logs'},
  89.           {'label': '设置', 'imgico': 'assets/images/svg/settings.svg', 'path': '/setting'},
  90.         ]
  91.       },
  92.       {
  93.         'label': '编程开发',
  94.         'children': [
  95.           {'label': 'Flutter', 'imgico': 'assets/images/logo.png', 'link': 'https://flutter.dev/', 'background': const Color(0xFFDAF2FA),},
  96.           {'label': 'DeepSeek深度求索', 'imgico': 'https://www.faxianai.com/wp-content/uploads/2025/02/20250205134524-1febd.png', 'link': 'https://chat.deepseek.com/', 'background': Color(0xffffffff), 'size': '2x1'},
  97.           // ...
  98.         ]
  99.       },
  100.       {
  101.         'label': '关于', 'imgico': const Icon(Icons.info),
  102.         'onClick': () => {
  103.           // ...
  104.         }
  105.       },
  106.       {
  107.         'label': '公众号', 'imgico': const Icon(Icons.qr_code),
  108.         'onClick': () => {
  109.           // ...
  110.         }
  111.       },
  112.     ]
  113.   }
  114. ];
复制代码
桌面Dock菜单

30.png

31.png

桌面Dock菜单配置参数
  1. /**
  2.   * ================== 桌面dock菜单配置项 ==================
  3.   * [label]  图标标题
  4.   * [imgico] 图标(本地或网络图片) 支持Icon图标、自定义组件、svg/png...类型
  5.   * [path]   跳转路由页面
  6.   * [link]   跳转外部链接
  7.   * [active] 激活圆点
  8.   * [onClick]  点击图标回调函数
  9.   * children 二级菜单
  10.   */
复制代码
以上就是flutter3.32搭建跨平台仿macOS+windows桌面端os系统的一些知识分享，希望对大家有所帮助！
附上几个最新项目实例
最新研发flutter3.27+bitsdojo_window+getx客户端仿微信聊天Exe应用
最新版Flutter3.32+Dart3.8跨平台仿微信app聊天界面|朋友圈
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
Uniapp-DeepSeek跨三端AI助手|uniapp+vue3+deepseek-v3流式ai聊天模板
vue3-webseek网页版AI问答|Vite6+DeepSeek+Arco流式ai聊天打字效果
flutter3-dymall仿抖音直播商城|Flutter3.27短视频+直播+聊天App实例
Tauri2.0-Vue3OS桌面端os平台|tauri2+vite6+arco电脑版OS管理系统
Tauri2.0+Vite5聊天室|vue3+tauri2+element-plus仿微信|tauri聊天应用
Electron31-Vue3Admin管理系统|vite5+electron+pinia桌面端后台Exe
Electron32-ViteOS桌面版os系统|vue3+electron+arco客户端OS管理模板
uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天语音/朋友圈
32.gif

 

来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除
OSFlutter3MacOS桌面系统

使用道具 举报

相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
博咱
2025-8-2 10:34:13

0

粉丝关注

17

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫