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

项目特性

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

项目结构目录

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': '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菜单配置项 ==================
  * [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聊天语音/朋友圈