经过一周高强度迭代研发，最新款flutter3.41.5+dart3.11+window_manager实战macOS/windows风格客户端os管理框架系统。支持桌面栅格菜单拖拽/dock菜单拖拽等功能。

实现技术

• 编辑器：Vscode
  
• 跨平台框架：flutter3.41+dart3.11
  
• 窗口管理：window_manager^0.5.1
  
• 路由/状态管理：get^4.7.3
  
• 缓存服务：get_storage^2.1.1
  
• 拖拽排序：reorderables^0.6.0
  
• 图表组件：fl_chart^1.2.0
  
• 托盘管理：system_tray^2.0.3
  
• 日历插件：syncfusion_flutter_calendar^33.2.8

项目结构框架

flutter3.41-macos已经正式更新到我的原创小铺，欢迎下载使用。

https://b23.tv/xhu5Dnp

项目配置入口

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: '打开主界面', onClicked: (menuItem) async => await windowManager.show()),
    MenuItemLabel(label: '隐藏窗口', onClicked: (menuItem) async => await windowManager.hide()),
    MenuItemLabel(label: '设置中心', onClicked: (menuItem) => {}),
    MenuItemLabel(label: '锁屏', onClicked: (menuItem) => {}),
    MenuItemLabel(label: '退出', 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,
    );
  }
}

flutter3自定义macos/window桌面布局

提供了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(),
      );
    });
  }
}

获取更多实战项目案例。

Electron38.2实战客户端OS系统|vite7+vue3+electron仿mac/wins桌面

2025最新款Electron38+Vite7+Vue3+ElementPlus桌面客户端后台管理系统Exe

最新研发vite7.0+electron38客户端仿微信EXE聊天软件

原创uniapp+vite5+vue3+uv-ui跨三端短视频+直播+聊天app应用

uni-app+deepseek-v3跨三端ai流式输出对话模板

2025最新款Tauri2.9+Vite7+Vue3+ElementPlus电脑端后台管理系统Exe

最新版Vite7.1+Tauri2.8+Vue3电脑端仿QQ/微信聊天程序

Flutter3.32实战桌面端OS系统|flutter3仿macOS桌面

flutter3.27跨平台仿微信客户端聊天Exe程序|朋友圈|短视频

flutter3+deepseek手机端ai流式输出聊天模板

实战跨平台Electron35+DeepSeek-V3搭建客户端AI模板

deepseek-v3+vue3.5网页版webai流式对话模板