历经两周爆肝开发，2025原创新作flutter3.32+dart3.8+get+window_manager+reorderables实战仿MacOS 和Windows桌面风格os管理系统。
使用技术
- 开发工具：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两种桌面风格布局
- 经典Mac程序坞Dock菜单(可拖拽排序/二级菜单)
- 自定义json配置桌面菜单和Dock菜单
- 自研桌面栅格化布局模板
- 自定义桌面个性化壁纸、全场景毛玻璃虚化UI质感
- 支持自定义弹窗加载页面组件(支持全屏/拖拽/缩放)
项目框架结构
入口配置
ts
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());
}
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,
);
}
}使用system_tray插件自定义系统托盘管理。
ts
// 初始化系统托盘图标
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();
}
});
}
桌面布局模板
内置macos 和windows两种风格桌面布局。
ts
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,
),
],
),
),
);
}),
);
ts
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配置参数
ts
/**
* ================== 桌面OS菜单配置 ==================
* [label] 图标标题
* [imgico] 图标(本地或网络图片) 支持Icon图标、自定义组件、svg/png...类型
* [path] 跳转路由页面
* [link] 跳转外部链接
* [hideLabel] 是否隐藏图标标题
* [background] 自定义图标背景色
* [size] 栅格磁贴布局(1x1 ... 12x12)
* [onClick] 点击图标回调函数
* children 二级菜单
*/如下图：支持配置二级弹窗菜单。桌面图标支持本地/网络图片、Icon图标。
json配置代码片段。
ts
late List deskMenus = [
{
'uid': '6c84fb90-12c4-11e1-840d-7b25c5ee775a',
'label': '主页',
'list': [
{'label': '今日', 'imgico': const Today(), 'hideLabel': true, 'size': '3x2'},
{
'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,
),
))
}
},
// ...
]
},
// ...
{
'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),},
// ...
]
},
{
'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'},
// ...
]
},
{
'uid': '3u85fb90-12c4-11e1-840d-7b25c5ee775a',
'label': '工作台',
'list': [
{'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'},
{'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': '管理中心',
'children': [
{
'label': '个人空间', 'imgico': 'assets/images/svg/my.svg',
'onClick': () => {
// ...
}
},
{'label': '用户管理', 'imgico': 'assets/images/svg/user.svg', 'path': '/user'},
]
},
{
'label': '编程开发',
'children': [
{'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菜单支持如下参数。
ts
/**
* ================== 桌面dock菜单配置项 ==================
* [label] 图标标题
* [imgico] 图标(本地或网络图片) 支持Icon图标、自定义组件、svg/png...类型
* [path] 跳转路由页面
* [link] 跳转外部链接
* [active] 激活圆点
* [onClick] 点击图标回调函数
* children 二级菜单
*/
整个项目涉及到的知识点还是蛮多的，感谢大家的阅读与支持！
flutter3.27+bitsdojo_window电脑端仿微信Exe应用
最新Flutter3.32+Dart3仿微信App聊天|朋友圈
基于uniapp+vue3+uvue跨三端短视频+聊天+直播app系统【h5+小程序+app端】
基于uniapp+vue3+deepseek+markdown搭建app版流式输出AI模板
vue3.5+deepseek+arco+markdown搭建web版流式输出AI模板
vue3仿Deepseek/ChatGPT流式聊天AI界面，对接deepseek/OpenAI API
基于tauri2.0+vue3.5+deepseek+arco搭建wins版流式输出AI系统
自研tauri2.0+vite6.x+vue3+rust+arco-design桌面版os管理系统Tauri2-ViteOS
自研tauri2.0+vite5+vue3+element-plus电脑版exe聊天系统Vue3-Tauri2Chat