基于Flutter3.x+Getx手机os桌面新模式

大家好，欢迎来到IT知识分享网。

今天给小伙伴们分享一款原创自研的flutter3.22手机版os桌面管理系统FlutterOS。

flutter-os采用全新自研桌面os栅格布局引擎、分屏式多页管理、自定义主题壁纸、卡片式桌面小部件、可拖拽式悬浮球菜单等功能。

使用技术

• 开发工具：vscode
• 技术框架：Flutter3.22.1+Dart3.4.1
• 路由/状态管理：get^4.6.6
• 本地存储：get_storage^2.1.1
• svg图片插件：flutter_svg^2.0.10+1
• 图表组件：fl_chart^0.68.0
• 国际化时间：intl^0.19.0

如下图：运行到windows端效果依然棒棒哒！

入口配置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 'utils/index.dart'; // 引入桌面栅格模板 import 'layouts/desk.dart'; // 引入路由管理 import 'router/index.dart'; void main() async { // 初始化get_storage本地存储 await GetStorage.init(); // 初始化国际化语言 initializeDateFormatting(); runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return GetMaterialApp( title: 'Flutter WeOS', debugShowCheckedModeBanner: false, theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue), useMaterial3: true, // 修复windows端字体粗细不一致 fontFamily: Platform.isWindows ? 'Microsoft YaHei' : null, ), home: const DeskLayout(), // 初始化路由 initialRoute: Utils.isLogin() ? '/' : '/launch', // 路由页面 getPages: routes, ); } }

flutter3实现栅格桌面os

/* * ======== os菜单配置 ======== * [label] 图标标题 * [imgico] 图标(本地或网络图片) 当type: 'icon'则为uni-icons图标名，当type: 'widget'则为自定义小部件标识名 * [type] 图标类型(icon | widget) icon为uni-icons图标、widget为自定义小部件 * [path] 跳转路由页面 * [link] 跳转外部链接 * [hideLabel] 是否隐藏图标标题 * [background] 自定义图标背景色 * [size] 栅格磁贴布局(16种) 1x1 1x2 1x3 1x4、2x1 2x2 2x3 2x4、3x1 3x2 3x3 3x4、4x1 4x2 4x3 4x4 * [onClick] 点击图标回调函数 */

List deskMenu = [ { 'uid': '6u85fb93-12c7-41e1-930d-8b25c5ee775a', 'list': [ {'label': 'Flutter3.22', 'imgico': 'assets/images/flutter.png', 'link': 'https://flutter.dev/'}, {'label': 'Dart中文官方文档', 'imgico': 'assets/images/dart.png', 'link': 'https://dart.cn/'}, ... {'label': '日历', 'imgico': const Calendar1x1(), 'type': 'widget', 'path': '/calendar', 'background': const Color(0xffffffff),}, {'label': '首页', 'imgico': const Icon(Icons.home_outlined), 'type': 'icon', 'path': '/home'}, {'label': '工作台', 'imgico': const Icon(Icons.poll_outlined), 'type': 'icon', 'path': '/workplace'}, { 'label': '组件', 'children': [ {'label': '组件', 'imgico': 'assets/images/svg/component.svg', 'path': '/component'}, ... ] }, { 'label': '管理中心', 'children': [ {'label': '个人主页', 'imgico': 'assets/images/svg/my.svg', 'path': '/ucenter'}, ... ] }, { 'label': '编程开发', 'children': [ {'label': 'Github', 'imgico': 'assets/images/svg/github.svg', 'background': const Color(0xff607d8b),}, {'label': 'Flutter', 'imgico': 'assets/images/flutter.png', 'background': const Color(0xFFDAF2FA),}, {'label': 'ChatGPT', 'imgico': 'assets/images/svg/chatgpt.svg', 'background': const Color(0xFF15A17F),}, ... ] }, { 'label': '关于', 'imgico': const Icon(Icons.info), 'type': 'icon', 'onClick': () => { ... } }, { 'label': '公众号', 'imgico': const Icon(Icons.qr_code), 'type': 'icon', 'onClick': () => { ... } }, ] } ... ]

通过开发这个flutter手机桌面os项目，探索一种全新的手机os模式。