基于flutter3.x+window_manager+getx桌面端仿macOS系统

2024-04-13 11:04
文章标签 系统 桌面 window macos manager getx 端仿 flutter3

本文主要是介绍基于flutter3.x+window_manager+getx桌面端仿macOS系统，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

flutter3_macui桌面端仿macOS系统实战项目完结啦！

原创研发flutter3.19+dart3.3+window_manager+getx等技术构建桌面版macOS系统。支持自定义毛玻璃虚化背景、Dock菜单多级嵌套+自由拖拽排序、可拖拽弹窗等功能。

在这里插入图片描述
支持macOS和windows11两种风格。

在这里插入图片描述

使用技术

  • 编辑器：VScode
  • 框架技术：Flutter3.19.2+Dart3.3.0
  • 窗口管理：window_manager^0.3.8
  • 路由/状态管理：get^4.6.6
  • 本地存储：get_storage^2.1.1
  • 拖拽排序：reorderables^0.6.0
  • 图表组件：fl_chart^0.67.0
  • 托盘插件：system_tray^2.0.3

在这里插入图片描述
在这里插入图片描述

特性

  1. 桌面菜单支持二级弹窗菜单
  2. 整体界面虚化毛玻璃模糊效果
  3. 经典Dock菜单
  4. 程序坞Dock菜单可拖拽式排序、支持二级弹窗式菜单
  5. 丰富视觉效果，自定义桌面主题换肤背景
  6. 可视化多窗口路由，支持弹窗方式打开新路由页面

在这里插入图片描述

项目结构

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

flutter-os布局模板

在这里插入图片描述

如上图：整体布局分为顶部导航条+桌面菜单+底部Dock菜单三部分。

return Scaffold(key: scaffoldKey,body: Container(// 背景图主题decoration: skinTheme(),// DragToResizeArea缩放窗口child: DragToResizeArea(child: Flex(direction: Axis.vertical,crossAxisAlignment: CrossAxisAlignment.start,children: [// 导航栏WindowTitlebar(onDrawer: () {// 自定义打开右侧drawerscaffoldKey.currentState?.openEndDrawer();},),// 桌面区域Expanded(child: GestureDetector(child: Container(color: Colors.transparent,child: Row(crossAxisAlignment: CrossAxisAlignment.start,children: [Expanded(child: GestureDetector(child: const WindowDesktop(),onSecondaryTapDown: (TapDownDetails details) {posDX = details.globalPosition.dx;posDY = details.globalPosition.dy;},onSecondaryTap: () {debugPrint('桌面图标右键');showDeskIconContextmenu();},),),],),),onSecondaryTapDown: (TapDownDetails details) {posDX = details.globalPosition.dx;posDY = details.globalPosition.dy;},onSecondaryTap: () {debugPrint('桌面右键');showDeskContextmenu();},),),// Dock菜单settingController.settingData['dock'] == 'windows' ?const WindowTabbar():const WindowDock(),],),),),endDrawer: Drawer(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0.0)),width: 300,child: const Settings(),),
);

在这里插入图片描述
在这里插入图片描述

底部Dock菜单滤镜模糊效果，支持macos和windows11两种风格。

在这里插入图片描述

MouseRegion(cursor: SystemMouseCursors.click,onEnter: (event) {setState(() {hoveredIndex = index;});controller.forward(from: 0.0);},onExit: (event) {setState(() {hoveredIndex = -1;});controller.stop();},child: GestureDetector(onTapDown: (TapDownDetails details) {anchorDx = details.globalPosition.dx;},onTap: () {if(item!['children'] != null) {showDockDialog(item!['children']);}},// 缩放动画child: ScaleTransition(alignment: Alignment.bottomCenter,scale: hoveredIndex == index ? controller.drive(Tween(begin: 1.0, end: 1.5).chain(CurveTween(curve: Curves.easeOutCubic))):Tween(begin: 1.0, end: 1.0).animate(controller),child: UnconstrainedBox(child: Stack(alignment: AlignmentDirectional.topCenter,children: [// tooltip提示Visibility(visible: hoveredIndex == index && !draggable,child: Positioned(top: 0,child: SizedOverflowBox(size: Size.zero,child: Container(alignment: Alignment.center,padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 1.0),margin: const EdgeInsets.only(bottom: 20.0),decoration: BoxDecoration(color: Colors.black54,borderRadius: BorderRadius.circular(3.0),),child: Text('${item!['tooltip']}', style: const TextStyle(color: Colors.white, fontSize: 8.0, fontFamily: 'arial')),),),),),// 图片/图标item!['children'] != null ?thumbDock(item!['children']):SizedBox(height: 35.0,width: 35.0,child: item!['type'] != null && item!['type'] == 'icon' ? IconTheme(data: const IconThemeData(color: Colors.white, size: 32.0),child: item!['imgico'],):Image.asset('${item!['imgico']}'),),// 圆点Visibility(visible: item!['active'] != null,child: Positioned(bottom: 0,child: SizedOverflowBox(size: Size.zero,child: Container(margin: const EdgeInsets.only(top: 2.0),height: 4.0,width: 4.0,decoration: BoxDecoration(color: Colors.black87,borderRadius: BorderRadius.circular(10.0),),),),),),],),),),),
)

List dockList = [{'tooltip': 'Flutter3.19', 'imgico': 'assets/images/logo.png'},{'tooltip': 'Safari', 'imgico': 'assets/images/mac/safari.png', 'active': true},{'tooltip': 'Launchpad','imgico': 'assets/images/mac/launchpad.png','children': [{'tooltip': 'Podcasts', 'imgico': 'assets/images/mac/podcasts.png'},{'tooltip': 'Quicktime', 'imgico': 'assets/images/mac/quicktime.png'},{'tooltip': 'Notes', 'imgico': 'assets/images/mac/notes.png'},{'tooltip': 'Reminder', 'imgico': 'assets/images/mac/reminders.png'},{'tooltip': 'Calc', 'imgico': 'assets/images/mac/calculator.png'},]},{'tooltip': 'Appstore', 'imgico': 'assets/images/mac/appstore.png',},{'tooltip': 'Messages', 'imgico': 'assets/images/mac/messages.png', 'active': true},{'type': 'divider'},...{'tooltip': 'Recycle Bin', 'imgico': 'assets/images/mac/bin.png'},
];

在这里插入图片描述
Dock二级菜单采用showDialog和Positioned组件实现定位弹窗。

void showDockDialog(data) {anchorDockOffset();showDialog(context: context,barrierColor: Colors.transparent,builder: (context) {return Stack(children: [Positioned(top: anchorDy - 210,left: anchorDx - 120,width: 240.0,height: 210,child: ClipRRect(borderRadius: BorderRadius.circular(16.0),child: BackdropFilter(filter: ImageFilter.blur(sigmaX: 20.0, sigmaY: 20.0),child: Container(padding: const EdgeInsets.symmetric(vertical: 10.0),decoration: const BoxDecoration(backgroundBlendMode: BlendMode.overlay,color: Colors.white,),child: ListView(children: [Container(padding: const EdgeInsets.symmetric(horizontal: 10.0,),child: Wrap(runSpacing: 5.0,spacing: 5.0,children: List.generate(data.length, (index) {final item = data[index];return MouseRegion(cursor: SystemMouseCursors.click,child: GestureDetector(child:  Column(children: [// 图片/图标SizedBox(height: 40.0,width: 40.0,child: item!['type'] != null && item!['type'] == 'icon' ? IconTheme(data: const IconThemeData(color: Colors.black87, size: 35.0),child: item!['imgico'],):Image.asset('${item!['imgico']}'),),SizedBox(width: 70,child: Text(item['tooltip'], style: const TextStyle(color: Colors.black87, fontSize: 12.0), maxLines: 2, overflow: TextOverflow.ellipsis, textAlign: TextAlign.center,),)],),onTap: () {// ...},),);}),),),],),),),),),],);},);
}

flutter3实现桌面菜单

在这里插入图片描述
在这里插入图片描述
桌面菜单使用垂向排列展示。

@override
Widget build(BuildContext context) {return Container(padding: const EdgeInsets.all(10.0),child: Wrap(direction: Axis.vertical,spacing: 5.0,runSpacing: 5.0,children: List.generate(deskList.length, (index) {final item = deskList[index];return MouseRegion(cursor: SystemMouseCursors.click,onEnter: (event) {setState(() {hoveredIndex = index;});},onExit: (event) {setState(() {hoveredIndex = -1;});},child: GestureDetector(onTapDown: (TapDownDetails details) {anchorDx = details.globalPosition.dx;anchorDy = details.globalPosition.dy;},onTap: () {if(item!['children'] != null) {showDeskDialog(item!['children']);}else {showRouteDialog(item);}},child: Container(...),),);}),),);
}

点击桌面图标，采用自定义弹窗组件显示页面内容。

/**桌面弹窗式路由页面  Q：282310962
*/
void showRouteDialog(item) async {// 链接if(item!['link'] != null) {await launchUrl(Uri.parse(item!['link']));return;}// 弹窗图标Widget dialogIcon() {if(item!['type'] != null && item!['type'] == 'icon') {return IconTheme(data: const IconThemeData(size: 16.0),child: item!['imgico'],);}else {return Image.asset('${item!['imgico']}', height: 16.0, width: 16.0, fit: BoxFit.cover);}}// Fdialog参数dynamic dialog = item!['dialog'] ?? {};navigator?.push(FdialogRoute(child: Fdialog(// 标题title: dialog!['title'] ?? Row(children: [dialogIcon(),const SizedBox(width: 5.0,),Text('${item!['title']}',),],),// 内容content: dialog!['content'] ?? ListView(padding: const EdgeInsets.all(10.0),children: [item!['component'] ?? const Center(child: Column(children: [Icon(Icons.layers,), Text('Empty~'),],)),],),titlePadding: dialog!['titlePadding'], // 标题内间距backgroundColor: dialog!['backgroundColor'] ?? Colors.white.withOpacity(.85), // 弹窗背景色barrierColor: dialog!['barrierColor'], // 弹窗遮罩层颜色offset: dialog!['offset'], // 弹窗位置(坐标点)width: dialog!['width'] ?? 800, // 宽度height: dialog!['height'] ?? 500, // 高度radius: dialog!['radius'], // 圆角fullscreen: dialog!['fullscreen'] ?? false, // 是否全屏maximizable: dialog!['maximizable'] ?? true, // 是否显示最大化按钮closable: dialog!['closable'] ?? true, // 是否显示关闭按钮customClose: dialog!['customClose'], // 自定义关闭按钮closeIcon: dialog!['closeIcon'], // 自定义关闭图标actionColor: dialog!['actionColor'], // 右上角按钮组颜色actionSize: dialog!['actionSize'], // 右上角按钮组大小draggable: dialog!['draggable'] ?? true, // 是否可拖拽destroyOnExit: dialog!['destroyOnExit'] ?? false, // 鼠标滑出弹窗是否销毁关闭),));
}

桌面菜单json配置列表。

List deskList = [{'title': 'Flutter3.19', 'imgico': 'assets/images/logo.png', 'link': 'https://flutter.dev/'},{'title': '首页', 'imgico': const Icon(Icons.home_outlined), 'type': 'icon','component': const Home(),'dialog': {'fullscreen': true}},{'title': '工作台', 'imgico': const Icon(Icons.poll_outlined), 'type': 'icon','component': const Dashboard(),},{'title': '组件','imgico': const Icon(Icons.apps),'type': 'icon','children': [{'title': 'Mail', 'imgico': 'assets/images/mac/mail.png'},{'title': 'Info', 'imgico': 'assets/images/mac/info.png'},{'title': 'Editor', 'imgico': 'assets/images/mac/scripteditor.png'},{'title': '下载', 'imgico': const Icon(Icons.download_outlined), 'type': 'icon'},{'title': 'Bug统计', 'imgico': const Icon(Icons.bug_report_outlined), 'type': 'icon'},{'title': '计算器', 'imgico': const Icon(Icons.calculate), 'type': 'icon'},{'title': '图表', 'imgico': const Icon(Icons.bar_chart), 'type': 'icon'},{'title': '打印', 'imgico': const Icon(Icons.print), 'type': 'icon'},{'title': '站内信', 'imgico': const Icon(Icons.campaign), 'type': 'icon'},{'title': '云存储', 'imgico': const Icon(Icons.cloud_outlined), 'type': 'icon'},{'title': '裁剪', 'imgico': const Icon(Icons.crop_outlined), 'type': 'icon'},]},{'title': '私密空间', 'imgico': const Icon(Icons.camera_outlined), 'type': 'icon','component': const Uzone(),},...{'title': '公众号', 'imgico': const Icon(Icons.qr_code), 'type': 'icon','dialog': {'title': const Text('QRcode', style: TextStyle(color: Colors.white60, fontSize: 14.0, fontFamily: 'arial')),'content': Padding(padding: const EdgeInsets.all(10.0),child: Column(mainAxisSize: MainAxisSize.min,children: [Image.asset('assets/images/qrcode_white.png', height: 120.0, fit: BoxFit.contain,),const Spacer(),const Text('扫一扫，关注公众号', style: TextStyle(color: Colors.white60, fontSize: 12.0,),),],),),'backgroundColor': const Color(0xff07c160),'actionColor': Colors.white54,'width': 300,'height': 220,'maximizable': false,'closable': true,'draggable': true,}},
];

在这里插入图片描述
自定义Fdialog弹窗支持如下参数配置

// 标题
final Widget? title;
// 弹窗内容
final Widget content;
// 标题内间距
final EdgeInsetsGeometry? titlePadding;
// 弹窗背景色
final Color? backgroundColor;
// 弹窗遮罩层颜色
final Color? barrierColor;
// 弹窗位置(坐标点)
final Offset? offset;
// 宽度
final num width;
// 高度
final num height;
// 圆角
final double? radius;
// 是否全屏
final bool fullscreen;
// 是否显示最大化按钮
final bool maximizable;
// 是否显示关闭按钮
final bool closable;
// 自定义关闭按钮
final Widget? customClose;
// 自定义关闭图标
final IconData? closeIcon;
// 右上角按钮组颜色
final Color? actionColor;
// 右上角按钮组大小
final double? actionSize;
// 是否可拖拽
final bool draggable;
// 鼠标滑出弹窗是否销毁关闭
final bool destroyOnExit;

Okay，以上就是flutter3+getx开发桌面端os系统的一些分享知识。

https://blog.csdn.net/yanxinyun1990/article/details/136410049

https://blog.csdn.net/yanxinyun1990/article/details/135329724

在这里插入图片描述

这篇关于基于flutter3.x+window_manager+getx桌面端仿macOS系统的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/899955。

相关文章

一篇文章彻底搞懂macOS如何决定java环境

一篇文章彻底搞懂macOS如何决定java环境

《一篇文章彻底搞懂macOS如何决定java环境》MacOS作为一个功能强大的操作系统,为开发者提供了丰富的开发工具和框架,下面：本文主要介绍macOS如何决定java环境的相关资料,文中通过代码... 目录方法一：使用 which命令方法二：使用 Java_home工具（Apple 官方推荐）那问题来了，
阅读更多...
linux系统中java的cacerts的优先级详解

linux系统中java的cacerts的优先级详解

《linux系统中java的cacerts的优先级详解》文章讲解了Java信任库（cacerts）的优先级与管理方式,指出JDK自带的cacerts默认优先级更高,系统级cacerts需手动同步或显式... 目录Java 默认使用哪个？如何检查当前使用的信任库？简要了解Java的信任库总结了解 Java 信
阅读更多...
macOS彻底卸载Python的超完整指南(推荐!)

macOS彻底卸载Python的超完整指南(推荐!)

《macOS彻底卸载Python的超完整指南(推荐!)》随着python解释器的不断更新升级和项目开发需要,有时候会需要升级或者降级系统中的python的版本,系统中留存的Pytho版本如果没有卸载干... 目录MACOS 彻底卸载 python 的完整指南重要警告卸载前检查卸载方法（按安装方式）1. 卸载
阅读更多...
Oracle数据库在windows系统上重启步骤

Oracle数据库在windows系统上重启步骤

《Oracle数据库在windows系统上重启步骤》有时候在服务中重启了oracle之后,数据库并不能正常访问,下面：本文主要介绍Oracle数据库在windows系统上重启的相关资料,文中通过代... oracle数据库在Windows上重启的方法我这里是使用oracle自带的sqlplus工具实现的方
阅读更多...
JWT + 拦截器实现无状态登录系统

JWT + 拦截器实现无状态登录系统

《JWT+拦截器实现无状态登录系统》JWT（JSONWebToken）提供了一种无状态的解决方案：用户登录后,服务器返回一个Token,后续请求携带该Token即可完成身份验证,无需服务器存储会话... 目录✅ 引言 一、JWT 是什么？ 二、技术选型 三、项目结构 四、核心代码实现4.1 添加依赖（pom
阅读更多...
修复已被利用的高危漏洞! macOS Sequoia 15.6.1发布

修复已被利用的高危漏洞! macOS Sequoia 15.6.1发布

《修复已被利用的高危漏洞!macOSSequoia15.6.1发布》苹果公司于今日发布了macOSSequoia15.6.1更新,这是去年9月推出的macOSSequoia操作... MACOS Sequoia 15.6.1 正式发布！此次更新修复了一个已被黑客利用的严重安全漏洞，并解决了部分中文用户反馈的
阅读更多...
基于Python实现自动化邮件发送系统的完整指南

基于Python实现自动化邮件发送系统的完整指南

《基于Python实现自动化邮件发送系统的完整指南》在现代软件开发和自动化流程中,邮件通知是一个常见且实用的功能,无论是用于发送报告、告警信息还是用户提醒,通过Python实现自动化的邮件发送功能都能... 目录一、前言：二、项目概述三、配置文件 `.env` 解析四、代码结构解析1. 导入模块2. 加载环
阅读更多...
linux系统上安装JDK8全过程

linux系统上安装JDK8全过程

《linux系统上安装JDK8全过程》文章介绍安装JDK的必要性及Linux下JDK8的安装步骤,包括卸载旧版本、下载解压、配置环境变量等,强调开发需JDK,运行可选JRE,现JDK已集成JRE... 目录为什么要安装jdk？1.查看linux系统是否有自带的jdk：2.下载jdk压缩包2.解压3.配置环境
阅读更多...
Linux查询服务器系统版本号的多种方法

Linux查询服务器系统版本号的多种方法

《Linux查询服务器系统版本号的多种方法》在Linux系统管理和维护工作中,了解当前操作系统的版本信息是最基础也是最重要的操作之一,系统版本不仅关系到软件兼容性、安全更新策略,还直接影响到故障排查和... 目录一、引言：系统版本查询的重要性二、基础命令解析：cat /etc/Centos-release详
阅读更多...
更改linux系统的默认Python版本方式

更改linux系统的默认Python版本方式

《更改linux系统的默认Python版本方式》通过删除原Python软链接并创建指向python3.6的新链接,可切换系统默认Python版本,需注意版本冲突、环境混乱及维护问题,建议使用pyenv... 目录更改系统的默认python版本软链接软链接的特点创建软链接的命令使用场景注意事项总结更改系统的默
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2