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

技术分享 8个月前 (08-03) 0 999+

原创flutter3.32+dart3.8+window_manager桌面OS解决方案Flutter3MacOS。

flutter3_macos最新研发flutter3.32+dart3.8+getx+window_manager+reorderables客户端os管理系统模板。支持macOS和windows两种桌面布局风格、毛玻璃虚化背景、桌面栅格布局模板、Dock菜单可拖拽排序、自定义JSON配置桌面/dock菜单。

技术栈

编辑器：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

项目特性

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

项目结构目录

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

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

flutter3.32+window_manager桌面端OS管理系统

项目入口文件main.dart

import 'dart:io'; import 'package:flutter/material.dart'; import 'package:get/get.dart'; import 'package:get_storage/get_storage.dart'; import 'package:intl/date_symbol_data_local.dart'; import 'package:system_tray/system_tray.dart'; import 'package:window_manager/window_manager.dart';  import 'utils/common.dart';  // 引入布局模板 import 'layouts/desktop.dart';  // 引入路由管理 import 'router/index.dart';  void main() async {   // 初始化国际化语言   initializeDateFormatting();    // 初始化get_storage本地存储   await GetStorage.init();    // 初始化window_manager窗口   WidgetsFlutterBinding.ensureInitialized();   await windowManager.ensureInitialized();   WindowOptions windowOptions = const WindowOptions(     title: 'Flutter-MacOS',     size: Size(1000, 640),     center: true,     backgroundColor: Colors.transparent,     skipTaskbar: false,     titleBarStyle: TitleBarStyle.hidden, // 是否隐藏系统导航栏     windowButtonVisibility: false,   );   windowManager.waitUntilReadyToShow(windowOptions, () async {     windowManager.setAsFrameless(); // 无边框     windowManager.setHasShadow(true); // 是否有阴影     await windowManager.show();     await windowManager.focus();   });    await initSystemTray();    runApp(const MyApp()); }  // 初始化系统托盘图标 Future<void> initSystemTray() async {   String trayIco = 'assets/images/tray.ico';   SystemTray systemTray = SystemTray();    // 初始化系统托盘   await systemTray.initSystemTray(     title: 'Flutter-MacOS',     iconPath: trayIco,   );    // 右键菜单   final Menu menu = Menu();   await menu.buildFrom([     MenuItemLabel(label: '打开主界面', image: 'assets/images/tray_main.bmp', onClicked: (menuItem) async => await windowManager.show()),     MenuItemLabel(label: '隐藏窗口', image: 'assets/images/tray_hide.bmp', onClicked: (menuItem) async => await windowManager.hide()),     MenuItemLabel(label: '设置中心', image: 'assets/images/tray_setting.bmp', onClicked: (menuItem) => {}),     MenuItemLabel(label: '锁屏', image: 'assets/images/tray_lock.bmp', onClicked: (menuItem) => {}),     MenuItemLabel(label: '退出', image: 'assets/images/tray_logout.bmp', onClicked: (menuItem) async => await windowManager.destroy()),   ]);   await systemTray.setContextMenu(menu);    // 右键事件   systemTray.registerSystemTrayEventHandler((eventName) async {     debugPrint('eventName: $eventName');     if (eventName == kSystemTrayEventClick) {       Platform.isWindows ? await windowManager.show() : systemTray.popUpContextMenu();     } else if (eventName == kSystemTrayEventRightClick) {       Platform.isWindows ? systemTray.popUpContextMenu() : await windowManager.show();     }   }); }  class MyApp extends StatelessWidget {   const MyApp({super.key});    @override   Widget build(BuildContext context) {     return GetMaterialApp(       title: 'FLUTTER3 MACOS',       debugShowCheckedModeBanner: false,       // 配置主题       theme: ThemeData(         colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),         useMaterial3: true,         // 修复windows端字体粗细不一致         fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null,       ),       home: const Desktop(),       // 初始路由       initialRoute: Common.isLogin() ? '/' : '/login',       // 路由页面       getPages: routePages,     );   } }

flutter-macos桌面布局模板

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

return Scaffold(   key: scaffoldKey,   body: Obx(() {     return Container(       // 背景图主题       decoration: skinController.skinUrl.isNotEmpty ? BoxDecoration(         image: DecorationImage(           image: AssetImage('${skinController.skinUrl}'),           fit: BoxFit.cover,         ),       )       :       // 默认渐变色       BoxDecoration(         gradient: LinearGradient(           begin: Alignment.topLeft,           end: Alignment.bottomRight,           colors: [Color(0xFF454ED4), Color(0xFFBC40D4)],         ),       ),       child: DragToResizeArea(         child: Flex(           direction: Axis.vertical,           crossAxisAlignment: CrossAxisAlignment.start,           children: [             // 顶部模块             widget.header ?? WindowTitlebar(               onDrawer: () {                 scaffoldKey.currentState?.openEndDrawer();               },             ),              // 桌面模块             Expanded(               child: widget.body ?? Container(),             ),              // 底部模块             Container(               child: widget.footer,             ),           ],         ),       ),     );   }), );

桌面布局模板

class _DesktopState extends State<Desktop> {   SettingController settingController = Get.put(SettingController());    @override   Widget build(BuildContext context) {     return Obx(() {       final layout = settingController.settingData['dock'];       return Layout(         // 桌面菜单         body: layout == 'macos' ? MacDesktop() : WindowDesktop(),         // 底部导航         footer: layout == 'macos' ? MacDock() : WindowDock(),       );     });   } }

桌面菜单JSON配置参数

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

桌面菜单JSON配置片段

late List deskMenus = [   {     'uid': '6c84fb90-12c4-11e1-840d-7b25c5ee775a',     'label': '主页',     'list': [       {'label': '今日', 'imgico': const Today(), 'hideLabel': true, 'size': '3x2'},       {'label': '日历', 'imgico': const Calendar2x2(), 'size': '2x2'},       {         'label': '便签', 'imgico': const Notebook(), 'size': '3x2',         'onClick': () => {           navigator?.push(FdialogRoute(             child: Fdialog(               title: Text('便签'),               content: Center(                 child: Column(                   mainAxisAlignment: MainAxisAlignment.center,                   children: [                     Icon(Icons.turned_in_not_rounded, color: Colors.black26, size: 40.0,),                     Text('自定义便签', style: TextStyle(color: Colors.black38),)                   ],                 )               ),               width: 375,               height: 400,               maximizable: true,               resizeable: true,             ),           ))         }       },       {'label': '备忘录', 'imgico': const Note(), 'size': '2x2'},       {'label': '倒计时', 'imgico': const Countdown(), 'size': '2x2'},        // ...     ]   },   // ...   {     'uid': '9a16fb90-12c4-11e1-840d-7b25c5ee775a',     'label': '摸鱼',     'list': [       {'label': 'Flutter3.32', 'imgico': 'assets/images/logo.png', 'link': 'https://flutter.dev/', 'background': Color(0xFFEAFAFF), 'size': '2x2'},       {'label': 'Github', 'imgico': 'assets/images/svg/github.svg', 'link': 'https://github.com/', 'background': Color(0xff607d8b),},       {'label': '掘金', 'imgico': 'assets/images/svg/juejin.svg', 'link': 'https://juejin.cn/', 'background': Color(0xff0984fe), 'size': '1x2'},       {'label': '哔哩哔哩', 'imgico': 'assets/images/svg/bilibili.svg', 'link': 'https://www.bilibili.com/', 'background': Color(0xfffe65a6), 'size': '3x2'},       // ...     ]   },   {     'uid': 'u738f210-807e-1e4e-1550-4deefac27e48',     'label': 'AI',     'list': [       {'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'},       {'label': '腾讯元宝', 'imgico': 'https://www.faxianai.com/wp-content/uploads/2025/02/20250224143149-7fe1f.png', 'link': 'https://yuanbao.tencent.com/', 'background': Color(0xffffffff), 'size': '2x2'},       // ...     ]   },   {     'uid': '3u85fb90-12c4-11e1-840d-7b25c5ee775a',     'label': '工作台',     'list': [       {'label': 'Fluttern3.22', 'imgico': Padding(padding: EdgeInsets.all(5.0), child: Image.asset('assets/images/logo.png'),), 'link': 'https://flutter.dev/', 'background': Color(0xffffffff), 'size': '2x1'},       {'label': 'Dart中文官方文档', 'imgico': 'assets/images/dart.png', 'link': 'https://dart.cn/'},       {'label': '日历', 'imgico': const Calendar1x1(), 'background': const Color(0xffffffff),},       {'label': '首页', 'imgico': const Icon(Icons.home_outlined), 'path': '/home'},       {'label': '工作台', 'imgico': const Icon(Icons.poll_outlined), 'path': '/dashboard'},       {         'label': '组件',         'children': [           {'label': '组件', 'imgico': 'assets/images/svg/component.svg', 'path': '/component'},           {'label': '表单管理', 'imgico': 'assets/images/svg/form.svg', 'path': '/form'},           {'label': '表格', 'imgico': 'assets/images/svg/table.svg', 'path': '/table'},           {'label': '订单', 'imgico': 'assets/images/svg/order.svg', 'path': '/order'},           {'label': 'Editor', 'imgico': 'assets/images/svg/editor.svg', 'path': '/editor'},         ]       },       {         'label': '管理中心',         'children': [           {             'label': '个人空间', 'imgico': 'assets/images/svg/my.svg',             'onClick': () => {               // ...             }           },           {'label': '用户管理', 'imgico': 'assets/images/svg/user.svg', 'path': '/user'},           {'label': '权限设置', 'imgico': 'assets/images/svg/role.svg', 'path': '/role'},           {'label': '日志', 'imgico': 'assets/images/svg/logs.svg', 'path': '/logs'},           {'label': '设置', 'imgico': 'assets/images/svg/settings.svg', 'path': '/setting'},         ]       },       {         'label': '编程开发',         'children': [           {'label': 'Flutter', 'imgico': 'assets/images/logo.png', 'link': 'https://flutter.dev/', 'background': const Color(0xFFDAF2FA),},           {'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'},           // ...         ]       },       {         'label': '关于', 'imgico': const Icon(Icons.info),         'onClick': () => {           // ...         }       },       {         'label': '公众号', 'imgico': const Icon(Icons.qr_code),         'onClick': () => {           // ...         }       },     ]   } ];

桌面Dock菜单

桌面Dock菜单配置参数

/**   * ================== 桌面dock菜单配置项 ==================   * [label]  图标标题   * [imgico] 图标(本地或网络图片) 支持Icon图标、自定义组件、svg/png...类型   * [path]   跳转路由页面   * [link]   跳转外部链接   * [active] 激活圆点   * [onClick]  点击图标回调函数   * children 二级菜单   */

以上就是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聊天语音/朋友圈