flutter3-weos手机OS系统|Flutter3.22+Getx仿ios桌面管理OA应用

news/2025/3/15 21:12:31/文章来源:https://www.cnblogs.com/xiaoyan2017/p/18234343

原创自研flutter3.x+getx仿制ios手机桌面UI管理系统模板Flutter3-OS

flutter3-osx基于最新跨平台技术Flutter3.22+Dart3.4+GetX+fl_chart实战仿IOS风格手机os管理系统。全新自研flutter磁贴式栅格布局引擎、分屏式多页管理、自定义主题壁纸、卡片式桌面小部件、可拖拽式悬浮球菜单等功能。

全新原创自研的OS栅格化菜单布局引擎,探索flutter手机端管理系统OA新模式

技术栈

  • 编辑器: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

flutter3-os项目在windows端效果依然nice!其实之前也有专门分享一款flutter3仿macOS桌面框架,感兴趣的可以去看看。

https://www.cnblogs.com/xiaoyan2017/p/18132176

功能特性

✅ 经典的栅格化布局+Dock导航模式
✅ 桌面菜单JSON配置生成
✅ 支持16种栅格布局模式
✅ 分屏式多页管理
✅ 可拖拽悬浮球菜单
✅ 毛玻璃虚化背景操作窗口
✅ 丰富的视觉效果,自定义桌面个性壁纸
✅ 高定制化自定义桌面小部件

项目结构目录

使用最新版flutter3.22+dart3.4架构开发,颠覆传统后台管理,探索一种全新的手机后台OA管理系统新模式。

目前该项目已经同步到我的原创作品集,有需要的话,欢迎去瞅瞅~

https://gf.bilibili.com/item/detail/1106107011

入口配置

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.
  @overrideWidget 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,);}
}

动画式数字密码登录验证解锁新模式。

摒弃传统的输入框式登录方式,为了整体效果一致性采用全新数字解锁验证模式。

使用 AnimatedSwitcher 和 FadeTransition 配合实现切换动画效果。

@override
Widget build(BuildContext context) {return Layout(extendBodyBehindAppBar: true,body: Container(padding: const EdgeInsets.all(20.0),child: AnimatedSwitcher(duration: const Duration(milliseconds: 250),// 动画控制
        transitionBuilder: (child, animation) {return FadeTransition(opacity: animation,child: ScaleTransition(// scale: animation,scale: animation.drive(Tween(begin: 0.9, end: 1.0).chain(CurveTween(curve: Curves.easeOut))),child: child,),);},// 当内容有变化的时候就会触发动画child: splashScreen ? GestureDetector(// 修复Column和Row组件,点击空白处无响应问题
          behavior: HitTestBehavior.translucent,child: Column(children: [...],),onPanStart: (details) {setState(() {swipeY = details.globalPosition.dy;});},onPanUpdate: (details) {double posY = swipeY - details.globalPosition.dy;if(posY > 100) {setState(() {splashScreen = false;});}},):Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [...],),),),),);
}

数字密码长度可以自定义配置,没有直接写死6位。

Column(children: [const Text('数字密码解锁', style: TextStyle(color: Colors.white, fontSize: 14.0),),const SizedBox(height: 10.0,),Wrap(spacing: 15.0,children: List.generate(passwordArr.length, (index) {return AnimatedContainer(duration: const Duration(milliseconds: 300),height: 10.0,width: 10.0,decoration: BoxDecoration(color: int.parse(passwordArr[index]) <= pwdValue.length ? Colors.white : Colors.white.withOpacity(0.01),border: Border.all(color: Colors.white),borderRadius: BorderRadius.circular(50.0),),);})),],
),

Container(width: 250.0,margin: const EdgeInsets.only(top: 50.0),child: Wrap(spacing: 15.0,runSpacing: 15.0,alignment: WrapAlignment.center,children: List.generate(keyNumbers.length, (index) {return Material(type: MaterialType.transparency,child: Ink(height: 60.0,width: 60.0,decoration: BoxDecoration(color: Colors.white24,border: Border.all(color: Colors.white24, width: .5),borderRadius: BorderRadius.circular(50.0),),child: InkWell(borderRadius: BorderRadius.circular(50.0),overlayColor: WidgetStateProperty.all(Colors.white38),child: DefaultTextStyle(style: const TextStyle(color: Colors.white, fontFamily: 'arial'),child: Column(children: [const SizedBox(height: 10.0,),Text(keyNumbers[index]['num'], style: const TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),),Text(keyNumbers[index]['letter'], style: const TextStyle(fontSize: 10.0),),],),),onTap: () {handleClickNum(keyNumbers[index]['num']);},),),);})),
),

公共布局模板Layout

桌面布局整体分为栅格式菜单+底部Dock菜单+拖拽悬浮球

@override
Widget build(BuildContext context) {return Scaffold(extendBodyBehindAppBar: widget.extendBodyBehindAppBar,appBar: widget.appBar ?? AppBar(forceMaterialTransparency: true,backgroundColor: Colors.transparent,foregroundColor: Colors.white,toolbarHeight: 0,),body: Center(child: Stack(children: [// 壁纸皮肤if(widget.showBackground)Obx(() => Container(decoration: BoxDecoration(image: DecorationImage(image: AssetImage('${skinController.skinUrl}'),fit: BoxFit.fill,),),)),Flex(direction: Axis.vertical,crossAxisAlignment: CrossAxisAlignment.start,children: [// 顶部插槽
              Container(child: widget.header,),// 内容区域
              Expanded(child: widget.body ?? Container(),),// 底部插槽
              Container(child: widget.footer,),],),// 额外插槽
          Container(child: widget.extra,),],),),);
}

flutter栅格式桌面os菜单

桌面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 deskMenus = [...{'uid': '3u85fb90-12c4-11e1-840d-7b25c5ee775a','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': () => {...}},]}...
];

由于该栅格桌面系统涉及到的知识点蛮多的,就不展开详细的一 一介绍了。希望以上分享对大家有所帮助哈~

最后附上两个实例项目

https://www.cnblogs.com/xiaoyan2017/p/18165578

https://www.cnblogs.com/xiaoyan2017/p/18092224

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/720799.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

qt 操作sqlite数据库

添加密码:要有圈住的这一句 原文连接

第二次大作业Blog

目录前言设计与分析踩坑心得改进建议总结 前言知识点:类与对象的应用: 在三次大作业中,类与对象的应用无疑是核心和基础。这充分体现了Java作为一种面向对象编程语言的特性。通过定义类,我们可以创建具有特定属性和行为的对象,从而构建出复杂的程序逻辑。在每次大作业中,…

C#.Net筑基-String字符串超全总结 [深度好文]

字符串是日常编码中最常用的引用类型了,可能没有之一,加上字符串的不可变性、驻留性,很容易产生性能问题,因此必须全面了解一下。字符串是日常编码中最常用的引用类型了,可能没有之一,加上字符串的不可变性、驻留性,很容易产生性能问题,因此必须全面了解一下。01、字符…

类的继承,接口的使用

1-知识点,题量,难度总结 1.this与super的区分与使用,如何正确使用多态(用父类类型创建子类对象,并调用子类中重写父类中的抽象方法)(在大作业5中的第二道修改学生信息中)(第三道中父类向下转型,另外还有子类向上转型)。 2接口的使用,多态的具体体现(例如在第一次家…

The University of Sydney

QS大学排名QS世界大学排名 QS大学学科排名 QS亚洲大学排名 QS商科硕士排名 QS就业竞争力排名 QS全球MBA排名软科ARWU大学排名 泰晤士大学排名 USNEWS大学排名 金融时报(FT)商学院排名 EduRank大学排名 CWUR世界大学排名 武书连大学排名 校友会大学排名 登录 去除广告?下载大…

QS世界大学排名 2025

大学排名 发现 展会活动 留学准备 申请 职业发展中文免费注册排名方法什么是QS之星? QS世界大学排名 2025通过2025年的QS世界大学排名,发现世界顶尖大学。展开In partnership with 排名榜单 排名指标 年份 2025…

chrome浏览器被360导航劫持解决办法

右键单击桌面浏览器图标 点击属性 修改目标,去点360的导航url,ok

读AI未来进行式笔记04数字医疗与机器人

读AI未来进行式笔记04数字医疗与机器人1. 数字医疗 1.1. 20世纪的“现代医学”得益于史无前例的科学突破,使得医疗的方方面面都得到改善,让人类预期寿命从1900年的31岁提高到2017年的72岁 1.2. 现有的医疗数据库和流程将实现数字化 1.2.1. 患…

linux启动

1. BIOS BIOS 代表基本输入/输出系统。简单来说,BIOS 会加载并执行主引导记录 (MBR) 引导加载程序。 首次打开计算机时,BIOS 首先对 HDD 或 SSD 执行一些完整性检查。 然后,BIOS 搜索、加载并执行引导加载程序,该程序可以在主引导记录 (MBR) 中找到。MBR 有时位于 USB 记忆…

Grid布局

目录Grid布局概述Grid 布局和 flex 布局网格布局的属性容器和项目网格轨道网格线 Grid布局 概述 Grid 布局即网格布局,目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。比较擅长将一个页面划…

产品功能架构图

产品功能架构图的绘制可以帮助团队更清晰地了解产品的功能结构,有助于沟通和协作。它也可以用于指导产品开发过程,帮助开发团队更好地理解产品需求和功能实现方式。现实情况是,很多产品初期都是在公司阶段,非常的模糊,这个时候boss让你画个产品架构图,你很抓瞎,大千UI工…

GPU与DSA架构分析

GPU与DSA架构分析GPU、GPGPU、DSA、FPGA、ASIC等AI芯片特性及对比GPUGPU(Graphics Processing Unit,图形处理器)是一种专门用于处理图形和图像的处理器。它是计算机的重要组成部分,主要用于加速图形和图像的处理和渲染。与传统的中央处理器(CPU)相比,GPU具有更多的并行处…