flutter3-weos手机OS系统|Flutter3.22+Getx仿ios桌面管理OA应用
原创自研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.
- @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,
- );
- }
- }
动画式数字密码登录验证解锁新模式。
摒弃传统的输入框式登录方式,为了整体效果一致性采用全新数字解锁验证模式。
使用 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
flutter3-weos手机OS系统|Flutter3.22+Getx仿ios桌面管理OA应用的更多相关文章
- 高校手机签到系统——第一部分Authority权限系统(下)
很抱歉,之前寝室光纤断了,所以到现在才更新这个系列的第二篇博客.点击访问高校手机签到系统——第一部分Authority权限系统(上) 这几天我反思了一下上一篇写博上的方式,一味的贴代码式的,是否应该更 ...
- 论山寨手机与Android联姻 【2】手机OS成为核心
手机凭借通话和短信这两项基本功能,积累了用户,开拓了市场.但是用户的需求是永无止境的,对于手机制造商来说,紧跟用户需求,拓展手机功能,是机会也是挑战. 1988年第一款数码相机,在日本上市.数码相机的 ...
- android API版本对应的系统版本及Android获取手机和系统版本等信息的代码
学了这么久的Android,竟然一直对其API对应的名称关系一值搞不清楚,现在网上认真看了下资料,转载一个觉得写得不错的作者的文章,记下来: [背景] 之前折腾android期间,慢慢地知道了,And ...
- python常用标准库(os系统模块、shutil文件操作模块)
常用的标准库 系统模块 import os 系统模块用于对系统进行操作. 常用方法 os模块的常用方法有数十种之多,本文中只选出最常用的几种,其余的还有权限操作.文件的删除创建等详细资料可以参考官方文 ...
- OS.js – 开源的 Web OS 系统,赶快来体验
OS.js 是一个开源的 Web OS 系统,可以在浏览器中运行,提供了窗口管理器,应用程序API,用户界面开发套件和抽象的文件系统等.可以部署在 Node 或者 PHP 环境中运行.OS.js is ...
- OS 系统下安装MySql 配置MySql环境变量
学习Hive需要,闲话不说 本文的内容: 下载Mysql for Mac 下载Mysql Workbench 安装 Mysql 和 Mysql Workbench 配置Mysql在OS 系统上的环境变 ...
- 首个攻击该Mac OS系统的恶意软件——KeRanger
首个攻击该Mac OS系统的恶意软件——KeRanger 曾几何时,苹果操作系统一度被人认为是最安全的操作系统.然而近几年,针对苹果系统的攻击日益增多,影响范围也越来越大.无独有偶,近日,苹果Mac ...
- 高校手机签到系统——Ksoap2的一些使用心得(补充)
高校手机签到系统系列: 高校手机签到系统——第一部分Authority权限系统(上) 高校手机签到系统——第一部分Authority权限系统(下) 高校手机签到系统——手机客户端 高校手机签到系统—— ...
- 高校手机签到系统——zxing.net生成二维码(补充)
高校手机签到系统——第一部分Authority权限系统(上) 高校手机签到系统——第一部分Authority权限系统(下) 高校手机签到系统——手机客户端 关于zxing.net的使用网上已有很多说明 ...
- 在 Linux 的 KVM虚拟机 上安装 Mac OS 系统的研究总结
在 Linux 的 KVM虚拟机 上安装 Mac OS 系统的研究总结 一.资料来源: 网上一共找到两个方法,一个是视频上的教程,一个是网页资料. 二.视频资料方法内容:1.install qe ...
随机推荐
- FPGA技术脚本使用
做fpga 不会脚本,基本跟残废一个概念.以前我觉得做FPGA应该学习什么人工智能,大数据,机器人.现在想起来真是傻逼,做fpga也好,做ic,做逻辑其实基本能力都是一样的. 一个学习tcl脚本,pe ...
- JWT对SpringCloud进行认证和鉴权
JWT(JSON WEB TOKEN)是基于RFC 7519标准定义的一种可以安全传输的小巧和自包含的JSON对象.由于数据是使用数字签名的,所以是可信任的和安全的.JWT可以使用HMAC算法对sec ...
- 解决跨域问题之fetch的使用
一.介绍 fetch 提供了一个获取资源的接口 (包括跨域). fetch 的核心主要包括:Request , Response , Header , Body 利用了请求的异步特性 --- 它是基于 ...
- 学Windows批处理第一天:使用批处理命令生成一个文件并写入内容
脚本功能:1.生成一个文件,文件名格式为:yyyymmddhhmmss 2.文件中写入一段文本 操作步骤:1.新建一个文本文档(txt格式) 2.修改文件名为任意名称(我的叫create_file), ...
- springboot获取七牛云空间文件列表及下载功能
原文摘自:https://www.codernav.com 第一步:新建springboot项目,引入jar包,其中hutool-all是工具类,用来写文件下载,可以随意更换. <!--工具类- ...
- 开箱即用!Linux 内核首个原生支持,让你的容器体验飞起来!| 龙蜥技术
简介: 本文将从 Nydus 架构回顾.RAFS v6 镜像格式和 EROFS over Fscache 按需加载技术三个角度来分别介绍这一技术的演变历程. 文/阿里云内核存储团队,龙蜥社区高性能存储 ...
- Nacos2.0的K8s服务发现生态应用及规划
简介:Nacos 是阿里巴巴于 2018 年开源的注册中心及配置中心产品,帮助用户的分布式微服务应用进行服务发现和配置管理功能.随着 Nacos2.0 版本的发布,在性能和扩展性上取得较大突破后,社 ...
- [CI/CD] 持续集成 & 持续部署 之 Github Actions
1. 配置 ssh 免密登录 看这篇简短的就够了 SSH 免密登录主机/服务器 怎么操作 ? 2. 定义 workflow Github Actions 针对项目语言提供了一系列模板,通过稍加修改并组 ...
- C# - 能否让 SortedSet.RemoveWhere 内传入的委托异步执行
TL;DR; 若想充分利用 RemoveWhere 带来的性能优势,建议传入判断是否删除元素的委托内采取同步操作.若一定要在该委托内使用异步操作,可以采用本文中绕行的方法,但摈弃了 RemoveWhe ...
- P10118 『STA - R4』And
P10118 『STA - R4』And 题意:给定 A,B,求 \(\sum y - x\),其中 x,y 满足: x < y x + y = A x & y = B 对于加运算和与运 ...