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菜單。

Electron38-Vue3OS客戶端OS系統|vite7+electron38+arco桌面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兩種桌面風格
經典程序塢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': '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系統的一些知識分享，希望對大家有所幫助！

vite7-webos網頁版os管理|Vue3+Vite7+ArcoDesign搭建pc端os后臺系統

附上幾個最新項目實例

Electron38-Wechat電腦端聊天|vite7+electron38仿微信桌面端聊天系統

electron38-admin桌面端后臺|Electron38+Vue3+ElementPlus管理系統

最新研發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聊天應用

uniapp+vue3聊天室|uni-app+vite4+uv-ui跨端仿微信app聊天語音/朋友圈

posted @ 2025-08-02 11:38 xiaoyan2017 閱讀(455) 評論(0) 收藏舉報

刷新頁面返回頂部

web前端項目案例實戰

交流分享前端(移動端|微信端|小程序)最新技術、知識、項目案例...