Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板
原创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: ,
),
),
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菜单配置 ==================
* 图标标题
* 图标(本地或网络图片) 支持Icon图标、自定义组件、svg/png...类型
* 跳转路由页面
* 跳转外部链接
* 是否隐藏图标标题
* 自定义图标背景色
* 栅格磁贴布局(1x1 ... 12x12)
* 点击图标回调函数
* 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': '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': '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菜单配置项 ==================
* 图标标题
* 图标(本地或网络图片) 支持Icon图标、自定义组件、svg/png...类型
* 跳转路由页面
* 跳转外部链接
* 激活圆点
* 点击图标回调函数
* 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聊天语音/朋友圈
来源：豆瓜网用户自行投稿发布，如果侵权，请联系站长删除
页:
[1]